通过画布canvas实现图片黑白化

图片是由一个个的像素点组成的，而每一个像素点都是由三原色（red,green,blue）加透明度(alpha)来组成。所以说如果我们希望改变图像的图像数据，其实就是改变图像每一个像素点的数据。

首先创建canvas对象，canvas对象提供了 2D、3D两种绘图方式，这里我们使用2D绘图
使用 context2d = drawing.getContext('2d'); 方法获得context2d对象。微信小程序通过wx.createCanvasContext创建canvas对象，拿到context2d对象之后，我们通过context2d提供的方法getImageData(),来获取图像数据，微信通过wx.getImageInfo，getImageData()有4个参数，分别表示画面区域的 x 和 y 坐标以及该区域的像素宽度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height);
ImageData 对象都有三个属性:width、height 和
data。其中 data 属性是一个数组，保存着图像中每一个像素的数据。并通过，red，green，blue，alpha来表示。我们如果想要改变图像的图像数据，就需要改变 imagedata的data属性数据，改变 red，green，blue，alpha 的值。

var imagedata = context2d.getImageData(0, 0, image.width, image.height);

var data = imagedata.data;

let i,len,red,green,blue,alpha,average;

for (i = 0 , len = data.length; i < len; i+=4) {
red = data[i];
green = data[i + 1];
blue = data[i + 2];
alpha = data[i + 3];

average = Math.floor((red + green + blue) / 3);

data[i] = average;
data[i+1] = average;
data[i+2] = average;
}

imagedata.data = data;
context2d.putImageData(imagedata, 0, 0);

//微信通过

// wx.canvasPutImageData

//微信的这个方法可以将画布上的图形转换为真是图片，从而进行上传下载

//wx.canvasToTempFilePath

通过画布canvas实现图片黑白化相关推荐

Python实现图片黑白化
下面是使用OpenCV Python实现图片黑白化的示例代码: ```python import cv2 # 读取图片 img = cv2.imread('lena.png') # 将图片转换为灰度图 ...
iOS之实现图片的压缩、解压缩、模糊、置灰、马赛克、黑白化、调色等处理
压缩图片 func imageCompress(targetWidth:CGFloat) -> UIImage {let targetHeight = (targetWidth/width)*h ...
php图片黑白,JS对图片进行黑白化设置
这次给大家带来JS对图片进行黑白化设置,JS对图片进行黑白化设置的注意事项有哪些,下面就是实战案例,一起来看一下. HTML5推出了元素,使我们可以通过js动态的在这个区域之中进行图像的绘制.而我们 ...
PPT中如何将图片灰化（黑白化）
在制作PPT时,有时候为了突出重点,需要将其余的内容设置成灰色.如果是文字内容,直接可以用选用灰色字体即可,那图片呢.这里有一个简单的办法. 1.选中图片 2.右键,选择"设置对象格式&qu ...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法将画布(canvas)图像保存成本地图片的方法使用HT ...
canvas画布加载图片 - Kaiqisan
canvas画布加载图片就是往画布里面添加一些本地的或者网络上的图片.从而使画布图文并茂. 关键代码 let image = new Image(): 这里新增一个图片对象,它是一个图像的载体.但通 ...
canvas画布上平铺图片绘制文本
1️⃣知识点①:如何在canvas画布上平铺图片: ⚠️知识点实现: <!DOCTYPE html> <html><head><meta charset=&q ...
如何抓取canvas画布中的图片
如何抓取canvas画布中的图片网络页面中存放图片的形式有很多这里说一下canvas格式时怎么获取 String fullImgJs = "return document.getElem ...
html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...

通过画布canvas实现图片黑白化

通过画布canvas实现图片黑白化相关推荐

最新文章

热门文章