C/C++教程

canvas图片换色（转加自我总结）

本文主要是介绍canvas图片换色（转加自我总结），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

最近有一个需求说是需要换图片颜色。

最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。

下面是替换颜色的方法。效果还行吧。一般般

主要代码还是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>复制代码


这篇关于canvas图片换色（转加自我总结）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航