帆布如何处理图片

　　介绍

这篇文章给大家分享的是有关帆布如何处理图片的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

画布,中文译为“画布”,HTML5中新增了& lt; canvas>元素,可以结合JavaScript动态地在画布中绘制图形。

大概流程非常简单,主要分为以下三个步骤:

帆布如何处理图片

是的,就像把大象装进冰箱一样简单,哈哈。

<强>一,主要API

整个流程中所用到的主要画布API有:

<李>

绘制图像:drawImage ()

<李>

获取图像数据:getImageData ()

<李>

重写图像数据:putImageData ()

<李>

导出图像:toDataURL ()

<强> 1。drawImage()

顾名思义,该方法就是用于将图像绘制于帆布画布当中,具体用法有三种:

①在画布上定位图像:context.drawImage (img, x, y)
②在画布上定位图像,并规定图像的宽度和高度:context.drawImage (img, x, y,宽度、高度)
③剪切图像,并在画布上定位被剪切的部分:context.drawImage (img, sx, sy,向下,sheight, x, y,宽度、高度)

以上参数值描述如下表:

参数描述img规定要使用的图像,画布或视频.sx可选。开始剪切的x坐标位置.sy可选。开始剪切的y坐标位置.swidth可选。被剪切图像的宽度.sheight可选。被剪切图像的高度方式来在画布上放置图像的x坐标位置.y在画布上放置图像的y坐标位置.width可选。要使用的图像的宽度。(伸展或缩小图像)高度可选。要使用的图像的高度。(伸展或缩小图像)

<强> 2。getImageData()

该方法用于从帆布画布中获取图像数据,具体用法如下:

获取画布指定矩形范围内的像素数据:var ImageData=https://www.yisu.com/zixun/context.getImageData (x, y,宽度、高度)
以上参数值描述如下表:

参数描述x开始复制的左上角位置的x坐标.y开始复制的左上角位置的y坐标.width将要复制的矩形区域的宽度.height将要复制的矩形区域的高度。

该方法会返回一个ImageData对象,该对象有三个属性分别为:宽度、高度和数据,而我们最主要用到的就是这数个数据组,因为它保存着图像中每一个像素的数据。有了这些数据之后我们便可以对它们进行处理,最后再将其重写至画布画布中,这样就实现了对图片的处理转换。对于该数据数组具体用法,我们可以在后面的实例中看到。

<强> 3。putImageData()

该方法很简单,就是用于将图像数据重写至画布画布中,具体用法如下:

context.putImageData (imgData, x, y, dirtyX、dirtyY dirtyWidth, dirtyHeight)

以上参数值描述如下表:

参数描述imgData规定要放回画布的ImageData对象.xImageData对象左上角的x坐标,以像素计.yImageData对象左上角的y坐标,以像素计.dirtyX可选。水平值(x),以像素计,在画布上放置图像的位置.dirtyY可选。水平值(y),以像素计,在画布上放置图像的位置.dirtyWidth可选。在画布上绘制图像所使用的宽度.dirtyHeight可选。在画布上绘制图像所使用的高度。

<强> 4。toDataURL()

这个方法与以上三种方法不同,它是帆布对象的方法,该方法返回的是一个包含数据URI的字符串,该字符串可直接作为图片路径地址填入& lt; img>标签的src属性当中,具体用法如下:

var  dataURL =, canvas.toDataURL(类型,encoderOptions);

以上参数值描述如下表:

参数描述类型可选。图片格式,默认为图像/png.encoderOptions可选。在指定图片格式为图像/jpeg或图像/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。其他参数会被忽略。

<强>二,图片处理实例

本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。

& lt; !——HTML比; 　　& lt; canvas  id=癱anvas",宽度=?00“,身高=?00“祝辞& lt;/canvas> 　　& lt; input  id=癶andle",类型=癰utton",价值=https://www.yisu.com/zixun/贝硗计?/> 　　<输入id="创建" type="按钮" value="生成图片"/> 　　

//JavaScript 　　时间=window.onload 函数(){ 　　,,,var  canvas =, . getelementbyid (“canvas"),,,,//获取帆布画布对象 　　,,,,,,,context =, canvas.getContext (& # 39; 2 d # 39;);,,//获2 d上取下文对象,大多数Canvas  API均为此对象方法 　　,,,var  image =, new 图像();,,//定义一个图片对象 　　,,,image.src =, & # 39;一个/img.jpg& # 39;;,, 　　,,,image.onload =,函数(){//此才能处必须注意!后面所有操作均需在图片加载成功后执行,否则图片将处理无效 　　,,,,,,,context.drawImage(形象,0,0),,,//将图片从帆布画布的左上角(0,0)位置开始绘制,大小默认为图片实际大小 　　,,,,,,,var  handle =, . getelementbyid (“handle"); 　　,,,,,,,var  create =, . getelementbyid (“create"); 　　,,,,,,,handle.onclick =,函数(){//才能,单击”处理图片”按钮,处理图片 　　,,,,,,,,,,,var  imgData =, context.getImageData (0, 0, canvas.width canvas.height);,,,//获取图片数据对象 　　,,,,,,,,,,,var  data =, imgData.data;,,//获取图片数据数组,该数组中每个像素用4个元素来保存,分别表示红,绿,蓝和透明度值 　　,,,,,,,,,,,var  average =, 0; 　　,,,,,,,,,,,for  (var 小姐:=,0;,小姐:& lt;, data.length;,我+=4),{ 　　,,,,,,,,,,,,,,,average =, Math.floor((数据[我]+ [i + 1] +数据[我+ 2])/3),,,//将红、绿、蓝色值求平均值后得到灰度值 　　,,,,,,,,,,,,,,,(我)的数据,=,数据(i + 1),=,数据(+ 2),=,平均;,,将每个像素点的色值重写 　　,,,,,,,,,,,} 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

帆布如何处理图片