canvas实现图片编辑,保存canvas图片
Canvas，中文翻译为“canvas”，是HTML5中新增的canvas元素，可以结合JavaScript在canvas中动态绘制图形。
今天我们不讨论画布的绘制，而是讨论如何处理图片。
这个过程很简单，主要分为以下三个步骤：
是的，就像把大象放进冰箱一样简单，哈哈。
一、主要API
整个过程中使用的主要Canvas API有：
draw image:draw image()getImageData:getImageData()重写图像数据：putImageData()导出图像：toDataURL()1. drawImage()
顾名思义，该方法用于在Canvas画布上绘制图像。有三种具体用途：
在画布上定位图像：context.drawImage(img，x，y)
将图像放置在画布上，并指定图像的宽度和高度：context.drawimage (img，x，y，width，height)
剪切图像并在画布上定位剪切部分：context.drawimage (img，sx，sy，swidth，she height，x，y，width，height)
下表描述了上述参数值：
描述参数img指定要使用的图像、画布或视频。Sx是可选的。开始切割的x坐标位置。Sy可选。开始切割的y坐标位置。Swidth是可选的。剪辑图像的宽度。身高是可选的。剪辑图像的高度。将图像的x坐标位置放在画布上。在画布上放置图像的y坐标位置。宽度可选。要使用的图像的宽度。(拉伸或缩小图像)高度是可选的。要使用的图像的高度。(拉伸或缩小图像)
2. getImageData()
该方法用于从画布Canvas中获取图像数据。具体用法如下：
获取画布指定矩形内的像素数据：var imagedata=context . getimagedata(x，y，width，height)
下表描述了上述参数值：
描述了参数x开始复制的左上角的x坐标。复制开始处左上角的y坐标。宽度要复制的矩形区域的宽度。高度要复制的矩形区域的高度。
这个方法会返回一个ImageData对象，这个对象有三个属性：宽度、高度和数据，我们主要使用这个数据数组，因为它保存了图像中每个像素的数据。有了这些数据，我们就可以对其进行处理，最后再改写成画布，从而实现图片的处理和转换。对于这个数据数组具体用法，我们可以在下面的例子中看到。
3. putImageData()
这个方法很简单，就是用来把图像数据重写到画布上，具体用法如下：
Context.putimagedata (imgdata，x，y，dirtyx，dirtyy，dirtywidth，dirtyheight)上述参数值如下表所述：
描述参数imgData指定要放回画布中的ImageData对象。imagedata对象左上角的x坐标，以像素为单位。图像数据对象左上角的y坐标，以像素为单位。DirtyX是可选的。画布上放置图像的水平值(x ),以像素为单位。DirtyY是可选的。图像放置在画布上的水平值(y ),以像素为单位。DirtyWidth是可选的。用于在画布上绘制图像的宽度。DirtyHeight是可选的。用于在画布上绘制图像的高度。
4. toDataURL()
这种方法与上述三种方法不同。它是Canvas对象的一个方法。该方法返回一个包含数据URI的字符串，可以直接作为图像路径地址填充img标签的src属性。具体用法如下：
var data URL=canvas . toda taurl(type，encoder options)；下表描述了上述参数值：
参数描述类型是可选的。图像格式，默认为image/png。EncoderOptions是可选的。当指定的图像格式为image/jpeg或image/webp时，您可以从0到1之间选择图像质量。如果超出值范围，将使用默认值0.92。其他参数被忽略。
二、图片处理实例
本例将简单介绍如何通过代码将彩色图片处理成黑白图片。
！-html-Canvas id= Canvas width= 600 height= 600 /Canvas input id= handle type= button value= process picture /input id= create type= button value= generate picture /Div id= result /Div//JavaScript window . onload=function(){ var Canvas=document . getelementbyid( Canvas )，//get canvas canvas对象context=Canvas . get context( 2d )；//获取2D上下文对象。对于这个对象方法，大多数画布API都是var Image=new Image()；//定义一个图片对象image . src= imgs/img . jpg ；Image.onload=function(){ //这里一定要注意！所有后续操作必须在图片加载成功后进行；否则，图片将处理无效的上下文；drawimage(图像；0;0).//从画布左上角(0，0)开始绘制图片，默认大小为图片实际大小var handle=document . getelementbyid( handle )；var create=document . getelementbyid( create )；Handle.onclick=function(){ //点击“处理图片”按钮处理图片var img data=context . getimagedata(0，0，canvas.width，canvas . height)；//获取图像数据对象var data=imgData.data//获取图像数据数组。数组中每个像素由4个元素保存，分别代表红、绿、蓝和透明度值var average=0；for(var I=0；I数据长度；I=4){ average=math . floor((data[I]data[I 1]data[I 2])/3)；//将红绿蓝值平均得到灰度值data[I]=data[I 1]=data[I 2]=Average；覆盖每个像素的颜色值} imgData.data=datacontext.putImageData(imgData，0，0)；//将处理后的图像数据重写到canvas中，此时Canvas中的图像变成黑白}；Create.onclick=function(){ //点击“生成图片”按钮，导出图片var img src=canvas . toda taurl()；//获取图片的data URL var new img=new Image()；var result=document . getelementbyid( result )；new img . src=img src；//将图像路径赋给src result . innerhtml=“”；result . appendchild(new img)；};};};可能上面的代码写的不好，看起来没那么好理解。最好是自己写，这样可以更深刻的理解。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。