javascript - 在 Canvas 上绘制(重新加载)带有 cors = "anonimous"的图像(javascript)

Question

我尝试重新加载图像以将其绘制在 Canvas 上(cors 的原因)

这是代码的一部分:

    var divicons = $(".leaflet-marker-icon");
    var dx = [];
    var dy = [];
    var mx = [];
    var my = [];
    for (var k = 0; k < divicons.length; k++) {
        var curTransform = divicons[k].style.transform;
        var splitTransform = curTransform.split(",");
        var marginX = parseInt(divicons[k].style.marginTop.replace("px", ""))
        var marginY = parseInt(divicons[k].style.marginLeft.replace("px", ""))
        dx.push(parseFloat(splitTransform[0].split("(")[1].replace("px", "")));
        dy.push(parseFloat(splitTransform[1].replace("px", "")));
        divicons[k].style.transform = "";
        divicons[k].style.left = dx[k] + "px";
        divicons[k].style.top = dy[k] + "px";

        varIconSizeWidth = parseInt(divicons[k].style.width.replace("px", ""))
        varIconSizeHeight = parseInt(divicons[k].style.height.replace("px", ""))
        var img = new Image();
        img.setAttribute("crossorigin", "anonymous");
        img.src = divicons[k].src + '?d=' + Date.now();
        img.onload = function() {
            ctx.drawImage(img, dx[k] + mapX + marginY, dy[k] + mapY + marginX);
            console.log(img)
        };
    }

    $(canvas).insertBefore(svgE);
    var myImage = canvas.toDataURL("image/jpeg");
    var link = document.createElement('a');
    link.download = "test.jpeg";
    link.href = myImage;
    document.body.appendChild(link);
    $(link).css("display", "none");
    link.click();
    document.body.removeChild(link);

如何正确重新加载，因为图像未绘制...

另外，当我安慰 img 和 divicons[k] 时 - 有一些区别(img 没有任何样式，甚至 img.style = divicons[k].style).... 另外，我想使用事件来开始下载 Canvas 。

Answer 1

属性名称区分大小写，即所谓的 camel-case (首字母非大写)所以正确的方法是使用大写 O:

img.setAttribute("crossOrigin", "anonymous");

但是，CORS 并不是绘制到 Canvas 的必要条件，它仅在您尝试从中提取像素时适用(toDataURL()、toBlob( )、getImageData()、createImageBitmap())。

代码的另一个问题是 onload 回调引用 img 变量。但是，此变量在父范围中被覆盖，因此当调用 onload 时，它包含不同的值，即可能尚未加载的另一个图像，因为它将保存最后一个图像源由于 onload 在循环结束之前不会被调用而设置。

要修复此问题，请在包含调用上下文的处理程序中引用 this(本例中为图像):

img.onload = function() {
    ctx.drawImage(this, dx[k] + mapX + marginY, dy[k] + mapY + marginX);
};

变量k也是如此； mapX 和 marginY 似乎没有定义等，并且会给您带来其他问题，但超出了这个问题的范围。