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

Question

I tryed to reload image to draw it canvas(couse of cors)

this is part of code:

    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);

How to reload corrertly, because image did not drew...

also, when I consoled img and divicons[k] - there are some difference(img haven't any style, even img.style = divicons[k].style).... Also, I'd like to use event, that will start download canvas.

Answer 1

Property names are case-sensitive and in so-called camel-case (with none-capitalized first letter) so the correct way is with capital O :

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

However, CORS is not a requirement to draw to canvas, it only applies when you try to extract pixels from it ( toDataURL() , toBlob() , getImageData() , createImageBitmap() ).

Another problem with the code is that the onload callback is referencing the img variable. However this variable is overridden in parent scope so when onload is called it contains a different value, ie another image that is likely not loaded yet since it will hold the last image source set due to the onload not being called until the loop finishes.

To fix, reference this instead inside the handler which contains the calling context (image in this case):

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

And the same goes with the variable k ; mapX and marginY do not seem to be defined etc. and will cause you other problems, but out of scope for this question.