我正在尝试制作所有 174x174 像素的图像拼贴画。该程序成功找到了图像,这些图像都位于我的服务器上。但是,只有单击“保存图像”按钮两次才能找到它。这让我相信 Canvas 是在 img 标签加载源之前绘制的。当我向 img.onload 添加警报功能时,这一点得到了证实。
这是点击“保存图像”按钮时触发的函数。
function saveimg(urls)
{
if(urls.length!=0)
{
///get chart canvas
var c = document.getElementById('chart');
//get array length
var length = urls.length;
//set correct canvas size
/*not relevant to the error*/
//get canvas content
var ctx=c.getContext("2d");
//make background black
ctx.fillStyle = "black";
ctx.fillRect(0, 0, c.width, c.height);
var i, j, posX = 0, posY = 0, count = 0;
for(i = 0; i < rows; i++)
{
for(j = 0; j < columns; j++)
{
if(count < length-2){
//assign source to img element
var cover = /*image url*/;
//if image is not found then draw a gray block
if(cover=='../resources/.png'){
ctx.fillStyle = "#D3D3D3";
ctx.fillRect(posX, posY, 174, 174);
}
else{
//create img html tag
var img = document.createElement("img");
//check if image loaded
img.onload = function(){
alert("success");
}
//assign image source
img.src = cover;
/draw on canvas
ctx.drawImage(img, posX, posY);
}
}
}
posX += 174;
count++;
}
posX = 0;
posY += 174;
}
//auto-download canvas as a png
var link = document.createElement('a');
link.download = 'charts4all.png';
link.href = c.toDataURL("image/png");
link.click();
}
}
可能是什么原因造成的,我该如何解决?
最佳答案
将ctx.drawImage(img, posX, posY)
和下载函数移动到img.onload
,
并设置 img crossOrigin
属性以避免 Tainted canvases issue
var img = document.createElement("img");
// avoid Tainted canvases issue
img.setAttribute("crossOrigin",'Anonymous');
//check if image loaded
img.onload = function(){
alert("success");
//draw on canvas
ctx.drawImage(img, posX, posY);
var link = document.createElement('a');
link.download = 'charts4all.png';
link.href = c.toDataURL("image/png");
link.click();
}
//assign image source
img.src = cover;
}
关于Javascript:在图像加载之前绘制 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51605977/