javascript – 尝试比较两个Canvas元素

我正在使用下面的代码来比较两个画布元素

function createImage(html,can) {
     var canvas = $( "#" + can );
     var ctx = canvas[0].getContext("2d");
     var data = "<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'>" +
                    "<foreignObject width='100%' height='100%'>" +
                        "<div xmlns='http://www.w3.org/1999/xhtml'>" +
                            html +
                        "</div>" +
                    "</foreignObject>" +
                "</svg>";
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    img.crossOrigin = '';
    var svg = new Blob([data],{ type: "image/svg+xml;charset=utf-8" });
    var url = DOMURL.createObjectURL(svg);
    img.onload = function () {
        ctx.drawImage(img,0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;
    //return img.src;
    return canvas[0];
}
var a1 = createImage("<span style='font-size:34px'><i><b>Hello</b></i></span>","can1");
var a2 = createImage("<span style='font-size:34px'><i><b>Hello</b></i></span>","can2");
setTimeout(function() {
    var ctx1 = a1.getContext('2d');
    var imageData = ctx1.getImageData(0,a1.width,a1.height);
    var pixels = imageData.data;
    var ctx2 = a2.getContext('2d');
    var imageData2 = ctx2.getImageData(0,a2.width,a2.height);
    var pixels2 = imageData2.data,count;
    for(var i = 0,il = pixels.length; i < il; i++) {
        if(pixels[i] == pixels2[i]){
            count++;
        }
    }
    if(count === pixels.length && count === pixels2.length){
        alert("Match");
    }
},5000);

但它正在回报我错误如下

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

如何摆脱这个错误？

解决方法

你得到交叉起始错误的原因是因为使用了< svg>命名空间声明位于http://www.w3.org/,其起源不同：

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml'>" +
                    html +
               "</div>" +
             "</foreignObject>" +
           "</svg>";

我可以说这个方法是从Drawing DOM objects into a canvas on MDN开始的.

当您以这种方式重新访问数据时,

var ctx1 = a1.getContext('2d');
var imageData = ctx1.getImageData(0,a1.height);

你会打错误：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

您可以在Chrome上测试：

> Your original version带有错误
> Another version with namespace declarations removed,由于缺少命名空间声明,它不会引发错误,同时也是空白的

您只能从函数返回数据,以避免得到此错误.但是由于img.onload的异步性质,

img.onload = function () {
    ctx.drawImage(img,0);
    DOMURL.revokeObjectURL(url);
};

您必须延迟检索数据,强制您重新访问该函数中的数据并导致错误.

因此,您应该使用不依赖于< svg>(如html2canvas)的DOM对象来构建画布的备用方法.

function createImage(html) {
    var dfd = new $.Deferred();
    var el = document.createElement("div");
        el.innerHTML = html;
        el.style.display = 'inline-block';
        document.body.appendChild(el);
    html2canvas(el,{
      onrendered: function(canvas) {
          document.body.appendChild(canvas);
          document.body.removeChild(el);
          dfd.resolve(canvas.toDataURL());
      }
    });
    return dfd;
}
$.when(
    createImage("<span style='font-size:34px'><i><b>Hello</b></i></span>"),createImage("<span style='font-size:34px'><i><b>Hello</b></i></span>")
).done(function(a1,a2){
   if (a1 === a2) {
      alert("Match"); 
   }
});

见DEMO.