HTML5视频教程教你如何用Canvas处理图片.doc

《HTML5视频教程教你如何用Canvas处理图片.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、HTML5视频教程教你如何用Canvas处理图片本篇文章小编和大家分享一下使用Canvas处理图片的方法，文章中会有代码列出，对Canvas感兴趣的小伙伴随着小编一起来看一下吧。一、主要API整个流程中所用到的主要CanvasAPI有：1.绘制图像：drawImage()2.获取图像数据：getImageData()3.重写图像数据：putImageData()4.导出图像：toDataURL()1、drawImage()顾名思义，该方法就是用于将图像绘制于Canvas画布当中，具体用法有三种：①在画布上定位图像：context.drawImage(img,x,y)②在画布上定位

2、图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height)③剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)以上参数值描述如下表：参数描述img规定要使用的图像、画布或视频。sx可选。开始剪切的x坐标位置。sy可选。开始剪切的y坐标位置。swidth可选。被剪切图像的宽度。sheight可选。被剪切图像的高度。x在画布上放置图像的x坐标位置。y在画布上放置图像的y坐标位置。width可选。要使用的图像的宽度。（伸展或缩小图

3、像）height可选。要使用的图像的高度。（伸展或缩小图像）2、getImageData()该方法用于从Canvas画布中获取图像数据，具体用法如下：获取画布指定矩形范围内的像素数据：varImageData=context.getImageData(x,y,width,height)以上参数值描述如下表：参数描述x开始复制的左上角位置的x坐标。y开始复制的左上角位置的y坐标。width将要复制的矩形区域的宽度。height将要复制的矩形区域的高度。该方法会返回一个ImageData对象，该对象有三个属性分别为：width、height和data，而我们最主要用到的就是这个dat

4、a数组，因为它保存着图像中每一个像素的数据。有了这些数据之后我们便可以对它们进行处理，最后再将其重写至Canvas画布中，这样就实现了对图片的处理转换。对于该data数组具体用法，我们可以在后面的实例中看到。3、putImageData()该方法很简单，就是用于将图像数据重写至Canvas画布中，具体用法如下：context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)以上参数值描述如下表：参数描述imgData规定要放回画布的ImageData对象。xImageData对象左上角的x坐标，以像素计。

5、yImageData对象左上角的y坐标，以像素计。dirtyX可选。水平值（x），以像素计，在画布上放置图像的位置。dirtyY可选。水平值（y），以像素计，在画布上放置图像的位置。dirtyWidth可选。在画布上绘制图像所使用的宽度。dirtyHeight可选。在画布上绘制图像所使用的高度。4、toDataURL()这个方法与以上三种方法不同，它是Canvas对象的方法，该方法返回的是一个包含dataURI的字符串，该字符串可直接作为图片路径地址填入标签的src属性当中，具体用法如下：vardataURL=canvas.toDataURL(type,encoderO

6、ptions);以上参数值描述如下表：参数描述type可选。图片格式，默认为image/png。encoderOptions可选。在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。其他参数会被忽略。二、图片处理实例本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。

7、tid="create"type="button"value="生成图片"/>