JavaScript异步加载图片

最新推荐文章于 2024-07-10 09:07:13 发布

小鹰丶

最新推荐文章于 2024-07-10 09:07:13 发布

阅读量1.1k

点赞数

分类专栏： # canvas # JavaScript 文章标签： JavaScript Canvas 异步 Promise load

本文链接：https://blog.csdn.net/jeremyjone/article/details/102958829

版权

本文介绍了如何在JavaScript中使用异步加载图片，特别是在画板应用中遇到的问题和解决方案。当使用橡皮擦功能时，由于canvas只能显示一张图片，有时会导致擦除后只剩原始图片。为解决这个问题，作者提出了在擦除后异步加载原始图片和擦除后的图片，通过合并这两张图片来形成完整的擦除效果。文章还展示了如何封装异步加载图片的函数，确保图片加载完成后再执行后续操作，从而避免加载问题。

摘要由CSDN通过智能技术生成

原文地址： https://www.jeremyjone.com/526/ ，转载请注明

之前写的画板里面，我将它升级了一下，首先可以传入一张默认图片，然后所有操作都是基于该图片进行操作。然后我发现，当使用橡皮擦的时候，它直接将整个canvas擦成了透明。

这是因为canvas每次只能展示一张图片，这个在之前说过，有兴趣的朋友可以参考之前的文章。

于是有了很简单的想法，在擦除完成后，首先在canvas中加载原始图片，然后加载擦除后的图片，这样重叠合并成一张完整的擦除后的效果图。

有了想法，动手做：

// 首先保存擦除的图片
let eraserPic = new Image();
eraserPic.src = this.canvasElem.toDataURL("image/png");

// 加载原始图片
let originPic = new Image();
originPic.src = this.originImage;

// 对原始图片响应，这里需要使用`load`响应，否则会有神奇的效果。。。
originPic.addEventListener("load", () => {
   
    this.ctx.drawImage(originPic, 0, 0, this.canvasElem.width