canvas中可以使用两种方式绘制图像,canvas绘图技术
前几天前辈推荐了一个很有意思的项目，——实时人物去除，利用TensorFlow.js和canvas中的图像处理，实现了视频中人物的消失。借此机会回顾一下canvas中的图像处理。
基本API
Canvas的图像处理能力通过ImageData对象处理像素数据。的主要API如下：
CreateImageData():创建一个空的ImageData对象getImageData():获取画布像素数据，每个像素有4个值—— rgba putImageData():将像素数据写入画布。
图像数据={width: number，height: number，data: uint8clamped array} width是画布的宽度或者x轴上的像素数；Height是画布的高度或Y轴上的像素数；Data是画布的像素数据数组，总长度为w * h * 4，每4个值(rgba)代表一个像素。
对图片的处理
下面，我们通过几个例子来看看canvas的基本图像处理能力。
原始图像效果：
const CVS=document . getelementbyid( canvas )；const CTX=CVS . get context( 2d )；const img=new Image()；Img.src=图片网址；img . onload=function(){ CTX . draw image(img，0，0，w，h)；}底片/负片效果
算法：取像素的255和rgb之差作为当前值。
函数负(x) {设y=255-x；返回y；}效果图：
const imageData=CTX . getimagedata(0，0，w，h)；const { data }=imageData设l=data.lengthfor(设I=0；I l；I=4){ const r=data[I]；const g=data[I 1]；const b=data[I ^ 2]；data[i]=负数(r)；data[i 1]=负数(g)；data[I ^ 2]=负数(b)；}ctx.putImageData(imageData，0，0)；单色效果
单色效果是保留当前像素的RGB三个值中的一个，去掉其他颜色值。
for(设I=0；I l；I=4) {//data[i]=0，去掉R和G的值；data[I 1]=0；}效果图：
灰度图
灰度图像：每个像素只有一个颜色值的图像。0到255，颜色由黑变白。
for(设I=0；I l；I=4){ const r=data[I]；const g=data[I 1]；const b=data[I ^ 2]；const gray=grayFn(r，g，b)；data[I]=gray；data[I 1]=gray；data[I 2]=gray；}算法1——平均法：
const gray=(r g b)/3；效果图：
算法2——人眼感知：根据人眼感知红、绿、蓝的程度：绿、红、蓝，给出权重划分。
Const gray=r * 0.3 g * 0.59 b * 0.11效果图：
此外，还有：
取最大值或最小值。
const grayMax=Math.max(r，g，b)；//值过大，bright const grayMin=Math.min(r，g，b)；//值太小，暗一点的是单通道，也就是三个RGB值中的一个。
二值图
算法：确定一个颜色值并比较当前的rgb值。如果大于该值，则显示黑色，否则显示白色。
for(设I=0；I l；I=4){ const r=data[I]；const g=data[I 1]；const b=data[I ^ 2]；const gray=gray1(r，g，b)；const binary=gray 126？255 : 0;data[i]=二进制；data[I 1]=binary；data[I 2]=binary；}效果图：
高斯模糊
高斯模糊是“模糊”算法之一，每个像素的值是相邻像素值的加权平均值。原像素的值具有最大的高斯分布值(权重最大)，相邻像素的权重随着远离原像素而变得越来越小。
一阶公式：
(使用一阶公式是因为一阶公式的算法更简单)
常数半径=5;//模糊半径常数权重矩阵=generateweightmarity(半径)；//权重矩阵对于(设y=0；y h；y ) { for(设x=0；x w；x ) {设[r，g，b]=[0，0，0]；设sum=0；设k=(y * w x)* 4；对于(设我=-半径；我=半径；i ) {设x1=x I；if(x1=0 x1 w){ let j=(y * w x1)* 4；r=数据[j] *权重矩阵[i半径];g=data[j 1] * weightMatrix[i半径];b=数据[j ^ 2]*权重矩阵[I半径];sum=weightMatrix[i半径];} } data[k]=r/sum；data[k 1]=g/sum；数据[k ^ 2]=b/sum；}}for(设x=0；x w；x ) { for(设y=0；y h；y ) {让[r，g，b]=[0，0，0]；设sum=0；设k=(y * w x)* 4；对于(设我=-半径；我=半径；i ) {设y1=y I；if(y1=0y1h){ let j=(y1 * w x)* 4；r=数据[j] *权重矩阵[i半径];g=data[j 1] * weightMatrix[i半径];b=数据[j ^ 2]*权重矩阵[I半径];sum=weightMatrix[i半径];} } data[k]=r/sum；data[k 1]=g/sum；数据[k ^ 2]=b/sum；} }函数生成权重矩阵(radius=1，sigma) { //sigma正态分布的标准偏差const a=1/(Math.sqrt(2 * Math .PI)* sigma)；const b=- 1/(2 * Math.pow(sigma，2))；设权重，weightSum=0，权重矩阵=[]；对于(设我=-半径；我=半径；I){权重=a *数学。exp(b *数学。pow(I，2))；weightMatrix.push(权重);weightSum=权重；}返回权重矩阵。map(物品=物品/重量总和)；//归一处理}效果图：
其他效果
这里再简单介绍下其他的图像效果处理，因为例子简单重复，所以不再给出代码和效果图。
亮度调整：将rgb值，分别加上一个给定值。透明化处理：改变颜色值中的a值。对比度增强：将rgb值分别乘以2,然后再减去一个给定值。总结
好了，上面就是一些基础的图像处理算法。
参考资料
高斯模糊的算法
高斯模糊
到此这篇关于帆布基础之图像处理的使用的文章就介绍到这了，更多相关帆布图像处理内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。