我可以用自己的图像重新绘制画布图像吗？

Question

我正在学习用画布绘制图像，并在此示例中遇到问题：

 let img = new Image(); img.src = 'https://image.freepik.com/free-photo/hrc-siberian-tiger-2-jpg_21253111.jpg'; let a = function () { let c1 = document.getElementById('c1'), c2 = document.getElementById('c2'); c1.width = c2.width = 150; c1.height = c2.width = 150; c1.getContext('2d').drawImage(img, 0, 0, 150, 150); c2.getContext('2d').drawImage(img, 0, 0, 150, 150); }; let b = function () { let c2 = document.getElementById('c2'); c2.width = 100; c2.height = 100; c2.getContext('2d').drawImage(c2, 0, 0, 100, 100); }; let c = function () { let c1 = document.getElementById('c1'), c3 = document.getElementById('c3'); c3.width = 100; c3.height = 100; c3.getContext('2d').drawImage(c1, 0, 0, 100, 100); }; a(); b(); c(); 

 <div> <canvas id="c1"></canvas> </div> <div> <canvas id="c2"></canvas> </div> <div> <canvas id="c3"></canvas> </div> 

内部b函数。 我想用其他尺寸（将宽度和高度从150更改为100）重新绘制（调整大小）它自己的图像。 但是看起来好像不行。

然后，我尝试制作另一个函数（ c ）。 在此功能中，我使用了画布c1的图像重新绘制了画布c3图像。 没关系。

所以，我的问题是：画布不能使用自己的图像自己绘制图像吗？ （或者我做错了什么）

Answer 1

编辑：起初，我认为在drawImage()调用中使用HTMLCanvasElement是不正确的参数类型。 那是错误的，这是一个有效的论点。 实际的问题是代码没有等待图像加载。

---

您需要看一下如何获取第一个画布的初始图像数据。 我不希望它起作用，因为您可能在实际加载之前从img绘制了图像数据。 您需要将回调附加到img以等待它完成图像加载， 然后在画布上绘制该图像。

考虑下面的示例，其中包括一种异步方式来加载图像，如何在另一个画布中绘制一个画布以及如何绘制文本（只是为了显示画布之间的差异）。

 function loadImage(path) { return new Promise((resolve, reject) => { let img = new Image(); img.addEventListener("load", () => { resolve(img); }); img.addEventListener("error", (err) => { reject(err); }); img.src = path; }); } loadImage("https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg") .then((img) => { let c1 = document.getElementById("c1"), c2 = document.getElementById("c2"), c1Ctx = c1.getContext("2d"), c2Ctx = c2.getContext("2d"); c1Ctx.drawImage(img, 0, 0, 150, 150); c1Ctx.strokeText("I'm drawing on canvas 1", 25, 25); c2Ctx.drawImage(c1, 25, 25, 100, 100); c2Ctx.strokeText("I'm drawing on canvas 2", 25, 25); }) .catch(console.error); 

 <canvas id="c1" width="150" height="150"></canvas> <canvas id="c2" width="150" height="150"></canvas> 

---

由于您希望能够从画布中提取数据，因此您可能会遇到的另一件事是CORS问题。 我明确指出这一点是因为您尝试在画布上绘制的图像来自其他域（在示例中为image.freepik.com ）。 每当您将来自另一个域的图像数据绘制到画布上时，该画布就会受到污染，您将无法再使用canvas的toBlob() ， toDataURL()或getImageData()方法。 请参阅： MDN：启用CORS的图片 。