canvas修改图片颜色例子

最新推荐文章于 2024-06-02 22:33:32 发布

前端的南姐

最新推荐文章于 2024-06-02 22:33:32 发布

阅读量5.9k

点赞数 2

分类专栏： javascript canvas

本文链接：https://blog.csdn.net/happygirlnan/article/details/99426058

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
      var c, ctx,myImage;
      function displayImage() {
          myImage = new Image();
          myImage.src = "img/host2.png";
            c = document.getElementById("myCanvas");
            if (c.getContext) {
                ctx = c.getContext("2d");
                myImage.onload = function() {            
                    ctx.drawImage(myImage, 0, 0);
                }
            }
      }
      function getColorData(r) {
        imageD = ctx.getImageData(0, 0, myImage.width, myImage.height);
        var pdata = imageD.data;
        var colorArr=r.split(",");
        for (var j = 0; j < pdata.length; j+=4) {
            pdata[j] =colorArr[0];
            pdata[j + 1] =  colorArr[1];
            pdata[j + 2] = colorArr[2];
        }
        ctx.putImageData(imageD, 0, 0);
      }

      function noPhoto() {
        alert("Please put a .png file in this folder and name it kestral.png.");
      }
      var i = 0;
      function colorChange() {
          i++;
          var c = "0,255,0";
          switch (i%3) {
              case 1:
                  c = "255,0,0";
                  break;
              case 2:
                  c = "255,245,0";
                  break;
          }
          getColorData(c);
      }

    </script>
</head>

<body onload="displayImage()">
    <p>原始图片：</p>
    <img id="myPhoto" src="./img/host2.png" onerror="noPhoto()">
    <p>Canvas图片：</p>
    <canvas id="myCanvas" width="200" height="200"></canvas>
   <button id="btn" onclick="colorChange()">变颜色啦！</button>
</body>
</html>

前端的南姐

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas修改图片颜色例子

<!DOCTYPE html><html><head> <script type="text/javascript"> var c, ctx,myImage; function displayImage() { myImage = new Image(); myImage....
复制链接

扫一扫

专栏目录