最近有一个需求说是需要换图片颜色。
最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧。一般般
主要代码还是copy别人的。这里就写一下，当记录
1、canvas的getImageData所生成的图片组成
根据循环可以得出
图片组成是ARGB格式，第一个是透明度，后续rgba
2、得出的图片循环需要按4的倍数进行循环，否则至少是卡死的地步
for (var j = 0; j < pdata.length; j+=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: 100px;
height: 50px;
background: coral;
position: fixed;
top: 0;
}
</style>
<head>
<script type="text/javascript">
var c, ctx,myImage;
function 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 = 0; j < pdata.length; j+=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>
