获取图片颜色（canvas）--转

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        canvas{
          float: left;
          cursor: crosshair;
        }
        div{
          width: 100px;
          height:100px;
          border:#ccc dashed 1px;
          float: left;
          margin-left: 20px;
        }
        p{
          float: left;
          margin-left: 10px;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="800" height="800">
        请在更高版本浏览器上使用
    </canvas>
    <div id='colorBox'></div>
    <p id='colorValue' ></p>
</body>
<script>
  window.onload=function(){
        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
        var colorBox=document.getElementById('colorBox');
        var colorValue=document.getElementById('colorValue');
        var img = new Image();
        img.src='img/s4.jpg';
        img.onload=function(){
          //对象，绘制在哪里，绘制在哪里，大小
          context.drawImage(img,0,0);
          var imagesData=context.getImageData(0,0,800,800);
          canvas.onclick=function(e){
            var x=e.clientX-canvas.offsetLeft;
            var y=e.clientY-canvas.offsetTop;

            var pixel=imagesData.data;
            var width=imagesData.width;

            var pixelRed= ((y-1)*(width*4)+(x-1)*4);
            var pixelGreen=pixelRed+1;
            var pixelBlue=pixelRed+2;
            var pixelAlpha=pixelRed+3;
             colorBox.style.backgroundColor="rgba("+pixel[pixelRed]+","+pixel[pixelGreen]+","+pixel[pixelBlue]+","+pixel[pixelAlpha]+")";
            colorValue.innerHTML="rgba("+pixel[pixelRed]+","+pixel[pixelGreen]+","+pixel[pixelBlue]+","+pixel[pixelAlpha]+")";
          }
        }

  }
</script>
</html>

优质内容筛选与推荐>>
1、Java中的多线程（Thread，Runnable）
2、小福bbs-冲刺日志(第三天)
3、扒一扒那些教程中不常被提及的JavaScript小技巧
4、Mysql 死锁的详细分析方法
5、Redis安装、主从配置及两种高可用集群搭建

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看