这篇文章给大家分享的是有关在html5中如何使用canvas对基础图像进行处理的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

基础 API

canvas 的图像处理能力通过 ImageData 对象来处理像素数据。主要的 API 如下：

createImageData()：创建一个空白的 ImageData 对象

getImageData()：获取画布像素数据，每一个像素点有 4 个值 —— rgba

putImageData()：将像素数据写入画布

imageData={width:Number,height:Number,data:Uint8ClampedArray}

width 是 canvas 画布的宽或者说 x 轴的像素数量；height 是画布的高或者说 y 轴的像素数量；data 是画布的像素数据数组，总长度 w * h * 4，每 4 个值（rgba）代表一个像素。

对图片的处理

下面，我们通过几个例子来看下 canvas 基础的图片处理能力。

constcvs=document.getElementById("canvas");constctx=cvs.getContext("2d");constimg=newImage();img.src="图片URL";img.onload=function(){ctx.drawImage(img,0,0,w,h);}

底片/负片效果

算法：将 255 与像素点的 rgb 的差，作为当前值。

functionnegative(x){lety=255-x;returny;}

constimageData=ctx.getImageData(0,0,w,h);const{data}=imageData;letl=data.length;for(leti=0;i<l;i+=4){constr=data[i];constg=data[i+1];constb=data[i+2];data[i]=negative(r);data[i+1]=negative(g);data[i+2]=negative(b);}ctx.putImageData(imageData,0,0);

单色效果

单色效果就是保留当前像素的 rgb 3个值中的一个，去除其他色值。

for(leti=0;i<l;i+=4){//去除了r、g的值data[i]=0;data[i+1]=0;}

灰度图

灰度图：每个像素只有一个色值的图像。0 到 255 的色值，颜色由黑变白。

for(leti=0;i<l;i+=4){constr=data[i];constg=data[i+1];constb=data[i+2];constgray=grayFn(r,g,b);data[i]=gray;data[i+1]=gray;data[i+2]=gray;}

算法1——平均法：

constgray=(r+g+b)/3;

算法2——人眼感知：根据人眼对红绿蓝三色的感知程度：绿 > 红 > 蓝，给定权重划分

constgray=r*0.3+g*0.59+b*0.11

除此以外，还有：

取最大值或最小值。

constgrayMax=Math.max(r,g,b);//值偏大，较亮constgrayMin=Math.min(r,g,b);//值偏小，较暗

constgrayMax=Math.max(r,g,b);//值偏大，较亮constgrayMin=Math.min(r,g,b);//值偏小，较暗

取单一通道，即 rgb 3个值中的一个。

二值图

算法：确定一个色值，比较当前的 rgb 值，大于这个值显示黑色，否则显示白色。

for(leti=0;i<l;i+=4){constr=data[i];constg=data[i+1];constb=data[i+2];constgray=gray1(r,g,b);constbinary=gray>126?255:0;data[i]=binary;data[i+1]=binary;data[i+2]=binary;}

高斯模糊

高斯模糊是“模糊”算法中的一种，每个像素的值都是周围相邻像素值的加权平均。原始像素的值有最大的高斯分布值（有最大的权重），相邻像素随着距离原始像素越来越远，权重也越来越小。

一阶公式：

（使用一阶公式是因为一阶公式的算法比较简单）

constradius=5;//模糊半径constweightMatrix=generateWeightMatrix(radius);//权重矩阵for(lety=0;y<h;y++){for(letx=0;x<w;x++){let[r,g,b]=[0,0,0];letsum=0;letk=(y*w+x)*4;for(leti=-radius;i<=radius;i++){letx1=x+i;if(x1>=0&&x1<w){letj=(y*w+x1)*4;r+=data[j]*weightMatrix[i+radius];g+=data[j+1]*weightMatrix[i+radius];b+=data[j+2]*weightMatrix[i+radius];sum+=weightMatrix[i+radius];}}data[k]=r/sum;data[k+1]=g/sum;data[k+2]=b/sum;}}for(letx=0;x<w;x++){for(lety=0;y<h;y++){let[r,g,b]=[0,0,0];letsum=0;letk=(y*w+x)*4;for(leti=-radius;i<=radius;i++){lety1=y+i;if(y1>=0&&y1<h){letj=(y1*w+x)*4;r+=data[j]*weightMatrix[i+radius];g+=data[j+1]*weightMatrix[i+radius];b+=data[j+2]*weightMatrix[i+radius];sum+=weightMatrix[i+radius];}}data[k]=r/sum;data[k+1]=g/sum;data[k+2]=b/sum;}}functiongenerateWeightMatrix(radius=1,sigma){//sigma正态分布的标准偏差consta=1/(Math.sqrt(2*Math.PI)*sigma);constb=-1/(2*Math.pow(sigma,2));letweight,weightSum=0,weightMatrix=[];for(leti=-radius;i<=radius;i++){weight=a*Math.exp(b*Math.pow(i,2));weightMatrix.push(weight);weightSum+=weight;}returnweightMatrix.map(item=>item/weightSum);//归一处理}

感谢各位的阅读！关于“在html5中如何使用canvas对基础图像进行处理”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！