canvas圖片換色（轉加自我總結）

時間 2020-04-26

標籤 canvas 圖片自我總結简体版

原文原文鏈接

最近有一個需求說是須要換圖片顏色。javascript

最後其實給我拒絕了，由於我說很難實現。可是心中仍是上心了。html

下面是替換顏色的方法。效果還行吧。通常般java

主要代碼仍是copy別人的。這裏就寫一下，當記錄web

一、canvas的getImageData所生成的圖片組成

根據循環能夠得出canvas

圖片組成是ARGB格式，第一個是透明度，後續rgba數組

二、得出的圖片循環須要按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];
}
複製代碼

三、注意替換顏色應該是倒序

因此0,1,2,3的順序bash

替換的rgb顏色應該是3,2,1ui

獲得數組rgb：data[i],data[i-1],data[2]spa

替換方式看上面代碼code

四、完整代碼格式

<!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>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。