html 帆布を使って白黒画像を生成する

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 帆布を使って白黒画像を生成する相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTML5 Canvas black and white effect demo</title>
</head>
<body>
  <img id="image" src="Unknown.jpeg" alt="Unknown.jpeg" />
  <canvas id="canvas" width="480" height="700"></canvas>
  <script type="text/javascript">
    window.onload = function() {
      var context = document.getElementById("canvas").getContext("2d");
      var image = document.getElementById("image");
      context.drawImage(image, 0, 0);
	  var h = document.getElementById("image").clientHeight;
	  var w = document.getElementById("image").clientWidth;
	  var imgd = context.getImageData(0, 0, w, h);
      var pix = imgd.data;
      for (var i = 0, n = pix.length; i < n; i += 4) {
        var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
        pix[i  ] = grayscale; // 赤
        pix[i+1] = grayscale; // 緑
        pix[i+2] = grayscale; // 青
      }
      context.putImageData(imgd, 0, 0);

    };
  </script>
</body>
</html>

以上是关于html 帆布を使って白黒画像を生成する的主要内容，如果未能解决你的问题，请参考以下文章