很多情况下都需要用到图片来显示，
这里族哪链会用到小程序的image组件。
其中有一个src属性，
类缓侍似html中img标兆孙签的src。
image组件的src属性，
最近有一个需求说是需要换图片颜色。最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧旦冲粗。一般般
主要代码还是copy别人的。这里就写一下，当记录
1、canvas的getImageData所生成的图片组成
根据循环可以得出
图片组成是ARGB格式，第一个是透明度，后续rgba
2、得出的图片循环需要按4的倍数进行循环，否则至少是卡死的地步
for (var j = 0j <pdata.lengthj+=4) { if (pdata[j] === 95) pdata[j] = colorArr[0] if (pdata[j - 1] === 170) pdata[j-1] = colorArr[1] if (pdata[j - 2j] === 129) pdata[j-2] = colorArr[2]} 复制代码
3、注意替换颜色应该是倒序
所以0,1,2,3的顺序
替换的rgb颜色应该是3,2,1
得到数组rgb：data[i],data[i-1],data[2]
替换方式看上面代码
4、完整代码格式
<!DOCTYPE html><模镇html><style> #btn { width: 100pxheight: 50pxbackground: coralposition: fixedtop: 0 } </style><head> <script type="text/javascript">var c, ctx,myImagefunction displayImage() { myImage = new Image() myImage.src = "1719ebbc83be39f0.webp.jpg" c = document.getElementById("myCanvas") if (c.getContext) { ctx = c.getContext("2d")myImage.onload = function() { ctx.drawImage(myImage, 0, 0)} } } //colorArr 替换后的颜色 // 替换前的颜色 function getColorData(colorArr, color2) { imageD = ctx.getImageData(0, 0, myImage.width, myImage.height) var pdata = imageD.data for (var j = 0j <pdata.lengthj+=4) { if (pdata[j] === color2[0]) pdata[j] = colorArr[0]if (pdata[j + 1] === color2[1]) pdata[j + 1] = colorArr[1]if (pdata[j + 2] === color2[2]) pdata[j + 2] = colorArr[2] } ctx.putImageData(imageD, 0, 0)} function colorChange() { // rgb颜色 getColorData([102, 51, 153], [95, 170, 129])} <判源/script></head><body onload="displayImage()"><p>原始图片：</p><img id="myPhoto" src="1719ebbc83be39f0.webp.jpg"><p>Canvas图片：</p><canvas id="myCanvas" width="200" height="200"></canvas><button id="btn" onclick="colorChange()">变颜色啦！</button></body></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）