- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试重新加载图像以将其绘制在 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
也是如此; mapX
和 marginY
似乎没有定义等,并且会给您带来其他问题,但超出了这个问题的范围。
关于javascript - 在 Canvas 上绘制(重新加载)带有 cors = "anonimous"的图像(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37206729/
这让我发疯。 我想在 QWebPage 中显示一个 url,但我想通过匿名代理进行传递。 代码 #setting up the proxy proxy = QNetworkProxy() proxy.
我尝试重新加载图像以将其绘制在 Canvas 上(cors 的原因) 这是代码的一部分: var divicons = $(".leaflet-marker-icon"); var d
我是一名优秀的程序员,十分优秀!