Javascript drawImage不在画布内绘制任何东西

Question

我有下面的JS代码。它应该获取画布的内容，调整它们的大小，然后将它们保存为图像。

saveImg.addEventListener("click", () => {
var img1 = new Image();
img1.src = canvas.toDataURL();
const link = document.createElement("a"); // Se creează un element HTML <a> (link) și se stochează în variabila "link".
function resizeImage(img1, w, h) {
var result = new Image();
var aux_canvas = document.createElement("canvas");
aux_canvas.width = w;
aux_canvas.height = h;
console.log(aux_canvas);
aux_ctx = aux_canvas.getContext("2d");
if (img1.complete) {
console.log("complete");
aux_ctx.drawImage(img1, 0, 0, w, h);
} else {
console.log("!complete");
img1.onload = function () {
console.log("onload");
aux_ctx.drawImage(img1, 0, 0, w, h);
};
}
console.log(img1);
//aux_canvas.getContext("2d").drawImage(img_func, 0, 0, w, h);
result.src = aux_canvas.toDataURL();
return result;
}
var img2 = resizeImage(img1, 28, 28);
link.download = `${Date.now()}.jpg`; //se setează proprietatea "download" a elementului link. Această proprietate specifică numele fișierului pentru descărcare. În acest caz, se utilizează valoarea Date.now() care este timpul curent exprimat ca număr de milisecunde de la 1 ianuarie 1970. Această valoare este concatenată cu ".jpg" pentru a crea un nume unic pentru fișierul de imagine.
link.href = img2.src; //Se setează proprietatea "href" a elementului link. Această proprietate specifică locația fișierului sau a resursei asociate cu linkul. În acest caz, se utilizează metoda "toDataURL()" a elementului "canvas" pentru a obține o reprezentare sub formă de imagine a conținutului din elementul canvas. Această reprezentare este stocată sub formă de URL de date, care este apoi atribuit la proprietatea "href" a elementului link.
link.click(); // clicking link to download image
});

函数drawImage似乎没有做任何事情，即使imag1包含来自画布的数据。有什么建议我可以解决这个问题吗?

提前感谢!

尝试在aux_canvas中使用drawRect手动绘制矩形，并且保存得很好。

Answer 1

假设在click()发生时图像尚未加载，您可以尝试这样做。我拍了照片。Onload部分，并将其包装在一个等待的promise中。我不确定是否堆栈溢出代码片段工具将允许自动下载部分(我看到"下载是不允许的。启动或实例化下载的帧被沙箱化;)，但是相同的代码在jsFiddle

上按预期工作

let saveImg = document.querySelector("button");
let canvas = document.querySelector("canvas");
// draw something for demo purposes
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

async function drawImageOnCanvas(img, context, w, h) {
if (img.complete) {
console.log("complete");
context.drawImage(img, 0, 0, w, h);
return Promise.resolve();
} else {
return new Promise(resolve => {
img.onload = function () {
console.log("onload");
context.drawImage(img, 0, 0, w, h);
resolve();
};
});
}
}
saveImg.addEventListener("click", async () => {
var img1 = new Image();
img1.src = canvas.toDataURL();
async function resizeImage(img1, w, h) {
var result = new Image();
var aux_canvas = document.createElement("canvas");
aux_canvas.width = w;
aux_canvas.height = h;
aux_ctx = aux_canvas.getContext("2d");
await drawImageOnCanvas(img1, aux_ctx, w, h);
result.src = aux_canvas.toDataURL();
return result;
}
var img2 = await resizeImage(img1, 28, 28);

const link = document.createElement("a");
link.download = `${Date.now()}.jpg`;
link.href = img2.src;
link.click();
});

<canvas height="200" width="200"></canvas>
<button>Save</button>