教你如何用画布来处理。

画布上，中文翻译成了画布；HTML5中的元素，可以用Javaｓｃｒｉｐｔ动态地在画布上绘制。

今天，我们不讨论画布的图形，而是如何处理图片。

这个过程可能很简单，它分为三个步骤：
是的，把大象放在冰箱里一样容易，哈哈。

1。主要的API

整个过程中使用的主画布API：

绘制图像：DrawImage（）
获取图像数据：getimagedata（）
重写图像数据：putimagedata（）
出口的形象：todataurl（）
1。DrawImage（）

顾名思义，这种方法用于将图像绘制到画布中。具体用途有三种：

（1）定位图像在画布：context.drawimage（IMG，x，y）

2。在画布上找到图像并指定图像的宽度和高度：context.drawimage（IMG，X，Y，宽度，高度）

（3）将图像和定位切割零件在画布上：context.drawimage（IMG，SX，SY，swidth，sheight，X，Y，宽度，高度）。

上述参数值如下所述：
参数
描述

IMG
要使用的图像、画布或视频。
SX
可选。开始切割的X坐标位置。
SY
可选。启动切割的Y坐标位置。
swidth
可选。切割图像的宽度。
sheight
可选。切割图像的高度。
X
将图像的x坐标放在画布上。
Y
将图像的y坐标放在画布上。
宽度
可选。要使用的图像的宽度。
高度
可选。要使用的图像的高度。（拉伸或缩小图像）
2。getimagedata（）

该方法用于从画布画布获取图像数据，具体用法如下：

在画布的矩形范围内获得像素数据：VAR数据= context.getimagedata（x，y，宽度，高度）

上述参数值如下所述：
参数
描述

X
拷贝的左上角的x坐标。
Y
副本左上角的y坐标。
宽度
要复制的矩形区域的宽度。
高度
要复制的矩形区域的高度。
该方法将返回一个数据对象。对象具有三个属性：宽度、高度和数据。我们使用的最重要的是数据数组，因为它保留了图像中的每个像素的数据，通过这些数据，我们可以处理它们，最后把它们重写到画布上，这样我们就可以转换和处理图片。至于数据数组的具体用法，我们可以在后面的例子中看到。

三.putimagedata（）

该方法非常简单，用于将图像数据重写到画布画布中，具体用法如下：
context.putimagedata（imgdata，X，Y，dirtyx，dirtyy，dirtywidth，dirtyheight）
上述参数值如下所述：
参数
描述

imgdata
指定数据对象放回帆布。
X
对数据对象的左上角的x坐标，以像素为单位。
Y
对数据对象的左上角的Y坐标，以像素为单位。
dirtyx
可选。水平值（x）、像素表、画布上图像的位置。
dirtyy
可选。水平值（y），像素表，画布上图像的位置。
DirtyWidth
可选。用于在画布上绘制图像的宽度。
dirtyheight
可选。用于在画布上绘制图像的高度。
4。todataurl（）

这种方法不同于以上三种方法。它是画布对象的一种方法。此方法返回包含数据URI的字符串，它可以直接将标记的SRC属性填充为图像路径地址。具体用法如下：
无功dataurl = canvas.todataurl（类型，encoderoptions）；
上述参数值如下所述：
参数
描述

型
可选。图片格式，默认值是图像PNG。
encoderoptions
可选。在指定的图片格式图像JPEG或图像/ WebP的情况下，画面的质量可以选择从0到1。如果范围是超出范围值，默认值将0.92.other参数将被忽略。
两。图象处理的一个例子

本例将简单介绍如何通过代码将彩色图像处理成黑白图像。
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布），帆布 / /把画布对象
背景canvas.getcontext（二维的）； / /得到二维的上下文对象，大部分的画布API这个对象的方法
var映像=新的（映像）；定义图像对象
image.src = 'imgs / IMG .webp；
（image.onload =功能）{ / /这里要注意！图片的所有操作都会在图片加载成功后执行，否则图片将无效。
context.drawimage（图像，0,0）； / /帆布图像从画布的左上角（0,0）的位置开始绘制大小默认为实际尺寸的图片
VAR处理= document.getelementbyid（处理）；
Var create = document.getElementById (create);
handle.onclick =功能（）{ / /点击按钮，图像处理；图像处理
无功imgdata = context.getimagedata（0,0，canvas.width、帆布。高度）； / /获取图像数据对象
VaR数据= imgdata.data； / /获取图像数据阵列，以节省4单元阵列，每个像素，表示红、绿、蓝和透明度分别。
var平均值= 0；
对于（var i = 0；i < data.length；我+ = 4）{
平均math.floor（ / 3（数据{我} { 1 }我+ +数据+数据+ 2 } {我））； / /红的平均灰度值后得到的绿色和蓝色的值
数据{数据} { i + 1 } =数据{ i + 2 } =平均值；重写每个像素点的颜色值
}
imgdata.data =数据；
context.putimagedata（imgdata，0,0）； / /图像数据重写帆布画布处理后，图像为黑色和白色的帆布
}；
Create.onclick =功能（）{ / /单击；生成的图像；出口图片按钮
无功imgsrc = canvas.todataurl（dataurl / /获得）；图片
无功newimg =新的图像（）；
VaR结果= document.getelementbyid（结果）；
newimg.src = imgsrc； / /分配src图片路径
result.innerhtml =；
result.appendchild（newimg）；
}；
}；
}；
也许上面的代码写得不是很好。这似乎不太清楚。最好自己写，这样对自己更深刻。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。