开场白
今天遇到一个场景；就是更改一个图片的颜色； 当听到这个。我直呼好家伙；这个是要上天了呀。 但是仔细一思考；借助canvas好像也能实现； 于是下来研究了一下，并不难； 我们下面来看看怎么实现的
基本思路
主要是获取图片的像素点；ctx.getImageData() 然后去更改图片的像素点； 最后绘制在画布上ctx.putImageData() 特别提醒： 在canvas的getImageData方法中，一个像素点由四个元素表示； 通常这四个元素是[r, g, b, a]，分别代表红、绿、蓝和透明度（alpha通道）。 r（红色通道）：范围从0到255，表示红色的强度。 g（绿色通道）：范围从0到255，表示绿色的强度。 b（蓝色通道）：范围从0到255，表示蓝色的强度。 a（透明度/alpha通道）：范围从0到255，表示像素的透明度。 0是完全透明的，255是完全不透明的。
获取图片的所有像素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas" width="1000" height="500" ></canvas> </body> <script> let canvas =document.getElementById('canvas') // 获取画笔(上下文) let ctx= canvas.getContext('2d') // 创建一个图片实例 let img = new Image() // 给图片赋值 img.src= './img/01.png' // 图片加载完成后绘制在画布上 img.onload = function(){ // 从坐标0，0开始绘制； ctx.drawImage(img, 0, 0, 584, 333); // 获取图像的所有像素 let allImgData = ctx.getImageData(0, 0, 584, 333); console.log('获取图像的所有像素==>', allImgData) } </script> </html>
操作图片像素点全部变为黄色
img.onload = function(){ // 从坐标0，0开始绘制； ctx.drawImage(img, 0, 0, 584, 333); // 获取图像的所有像素 let allImgData = ctx.getImageData(0, 0, 584, 333); console.log('获取图像的所有像素==>', allImgData) // 修改像素点;变成黄色; 4个为一组所以是:i+=4 for(let i=0;i< allImgData.data.length;i+=4){ allImgData.data[i] = 255 allImgData.data[i+1] = 255 allImgData.data[i+2] = 0 allImgData.data[i+3] = 255 } // 将像素点绘制上去 ctx.putImageData(allImgData, 0,0); }
将当前图片变为灰色
img.onload = function(){ // 从坐标0，0开始绘制； ctx.drawImage(img, 0, 0, 584, 333); // 获取图像的所有像素 let allImgData = ctx.getImageData(0, 0, 584, 333); console.log('获取图像的所有像素==>', allImgData) // 修改像素点;变成灰色 for(let i=0;i< allImgData.data.length;i+=4){ // 计算当前像素的平均值 let avg = ( allImgData.data[i] + allImgData.data[i+1] + allImgData.data[i+2])/3 allImgData.data[i] = avg allImgData.data[i+1] = avg allImgData.data[i+2] = avg allImgData.data[i+3] = 255 } // 将像素点绘制上去 ctx.putImageData(allImgData, 0,0); }
有人看到这里会开喷
就你这变成灰色，写了这么多的代码 我一行css就搞定了。 这样确实是可以的；我这里主要是想表达怎么更加精确去操作图片像素； 大佬们不要开喷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> canvas { /* 使用CSS3将元素转换为灰度。100%表示完全灰度。 */ filter: grayscale(100%); /* 兼容主流浏览器 */ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); /* 使用SVG滤镜实现灰度效果，用于一些不支持CSS滤镜的旧浏览器。 */ filter: url("data:image/svg+xml;utf8,#grayscale"); /* 用于旧版本的IE */ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* - 这也是用于WebKit浏览器的，灰度值设置为1而不是100%，因为某些旧版本的WebKit浏览器中可能是必需的。 */ -webkit-filter: grayscale(1); } </style> </head> <body> <canvas id="canvas" width="1000" height="500" ></canvas> </body> <script> let canvas =document.getElementById('canvas') // 获取画笔(上下文) let ctx= canvas.getContext('2d') // 创建一个图片实例 let img = new Image() // 给图片赋值 img.src= './img/01.png' // 图片加载完成后绘制在画布上 img.onload = function(){ // 从坐标0，0开始绘制； ctx.drawImage(img, 0, 0, 584, 333); } </script>
透骨色
img.onload = function(){ // 从坐标0，0开始绘制； ctx.drawImage(img, 0, 0, 584, 333); // 获取图像的所有像素 let allImgData = ctx.getImageData(0, 0, 584, 333); console.log('获取图像的所有像素==>', allImgData) // 修改像素点;变成透骨色 for(let i=0;i< allImgData.data.length;i+=4){ let avg = ( allImgData.data[i] + allImgData.data[i+1] + allImgData.data[i+2])/3 allImgData.data[i] = 255- allImgData.data[i] allImgData.data[i+1] = 255- allImgData.data[i+1] allImgData.data[i+2] = 255- allImgData.data[i+2] allImgData.data[i+3] = 255 } // 将像素点绘制上去 ctx.putImageData(allImgData, 0,0); }
