怎么用JavaScript把一张图片装载进Canvas

绝地灬酷狼 2023-06-18 03:54 3阅读 0赞

JavaScript在今天的Web世界里有巨大的影响，Canvas是用JavaScript在网页上画图的一种元素。这篇文章里，我们将向你介绍，如何使用JavaScript将一张已存在的图片加载进canvas，这样我们就可以进一步进行图像处理和像素级操作了。

假设我们有一张图片，像下面这样：

首先，我们动态的创建一个canvas对象，并获得2D渲染的上下文（如果你已经有了，可以继续使用它）：

let c = document.createElement("canvas");
    ctx = c.getContext('2d');

然后，创建一个Image对象，我们接下来会将上面的图片装载进Image对象，并传递给canvas。

let img1 = new Image();

但是我们不能像上面那样，一步步的操作，简单的装载，然后处理。因为下载图片是非阻塞的，JavaScript会立即执行下面一行代码，即使下载操作还没完成。

//THIS WON"T WORK!!
    let img1 = new Image();
    img1.src = document.getElementById("image1").src;
    //continue canvas processing

我们需要绑定onload事件，在图片下载完成后，开始向canvas传递图片数据。像下面这样：

//THIS IS THE CORRECT EXAMPLE
    let img1 = new Image();
    img1.onload = function () {
    //continue canvas procesing after image has been loaded
    };
    img1.src = document.getElementById("image1").src;

然后，我们将canvas的大小设置为跟图片一样（如果你愿意也可以设置大一点），并使用drawImage函数将图片装载进canvas。

img1.onload = function () {
          c.width = img1.width;
          c.height = img1.height;
          ctx.drawImage(img1, 0, 0);
    }

就是这样！图片已经在canvas中等候处理了！

怎么用JavaScript把一张图片装载进Canvas

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaScript全解析——canvas 绘制图片

相关怎么用JavaScript把一张图片装载进Canvas

相关怎么制作一张5M以上的大图片

相关将两张图片合并成一张图片

相关 Halcon：多张图片合并成一张图片

相关 javascript如何每秒钟切换一张图片

相关给图片做css动画,怎么用javascript把一张图片里面的图标做成动画不用CSS

相关 javascript-------一张图片的不同背景

相关把一张图片改成不同的样式

相关居中一张图片