gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:57:36 24 4
gpt4 key购买 nike

我尝试重新加载图像以将其绘制在 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 。

最佳答案

属性名称区分大小写,即所谓的 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也是如此; mapXmarginY 似乎没有定义等,并且会给您带来其他问题,但超出了这个问题的范围。

关于javascript - 在 Canvas 上绘制(重新加载)带有 cors = "anonimous"的图像(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37206729/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com