在画布上使用 cors = "anonimous" 绘制（重新加载）图像（javascript）

Question

我尝试重新加载图像以将其绘制在画布上（couse of 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）.... 另外，我想使用事件，它将开始下载画布。

Answer 1

属性名称区分大小写，并采用所谓的camel-case（首字母不大写），因此正确的方法是使用大写O：

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

但是，CORS 不是 绘制 到画布的必要条件，它仅适用于您尝试从中提取像素时（toDataURL()、toBlob()、getImageData()、createImageBitmap()） .

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

要修复，请在包含调用上下文的处理程序中引用this（本例中为图像）：

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

变量k也是如此； mapX 和 marginY 似乎没有定义等，会导致您出现其他问题，但超出此问题的范围。