通过canvas取图片上的颜色

2021-02-05

Word count: 267 | Reading time≈ 1 min

通过canvas取图片上的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
</head>
<body>

    <img id="img" src="http://127.0.0.1:5501/Image/2.jpg" alt="" style="display: none;">

    <canvas id="myCanvas" width="300" height="500" style="border:1px solid #c3c3c3;"></canvas>
    <div id="block" style="width:150px;height:150px;border:1px solid #c3c3c3;"></div>
</body>
<script src="../../../PlugIN/jquery.js"></script>
<script>
    var img= document.getElementById("img");

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    ctx.drawImage(img,0,0, 150, 250);

    var x,y ;  
    // 随机取图片上某个位置的颜色
    setInterval(function(){
        x= Math.random(1,150)*100
        y= Math.random(1,250)*100
        console.log(x,y)
        var imgData=ctx.getImageData(x,y,1, 1);
        console.log(imgData)
        var r = imgData.data[0];
        var g = imgData.data[1];
        var b = imgData.data[2];
        document.getElementById('block').style.backgroundColor = "rgb("+r+","+g+","+b+")";
    },500);

</script>
</html>

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.