关于Canvas对图片进行颜色置换的方法封装

519 阅读1分钟

哈喽哈,我是小王子,今天给大家分享一下我在项目中遇到要给某张图片进行一个颜色置换的功能的开发。

一、构建Canvas对象

  1. 首先创建一个ctx的Canvas的画布,定义一个img对象,定义两个颜色值,其中color3是白色转换后的颜色值,color4是黑色转换后的颜色值

image.png

2.这是要做转换的Canvas图片,将白色转换为蓝色,将黑色转换为深蓝色

image.png

  1. 首先将传入的图片获取,将这个图片通过img.onload,获取到图片的信息绘制到画布上,我们通过ctx.getImageData方法获取到包含色值的对象,然后获取包含所有色值的数组,进行遍历,如果这个数组的第三位大于250那么那就是白色,然后将其白色的rgb颜色替换为蓝色,反之为黑色替换为深蓝色,数值替换完成后,我们重新绘制ctx.putImageData(imagedata, 0, 0)当前画布,颜色就替换完成了,然后返回画布的base64数据

image.png

4.这是替换完成的样子

image.png