javascript求图片的主题色

最新推荐文章于 2024-07-24 14:26:48 发布

新时代_打工人

最新推荐文章于 2024-07-24 14:26:48 发布

阅读量412

点赞数

分类专栏：其它文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_46361270/article/details/128149248

版权

其它专栏收录该内容

18 篇文章 0 订阅

订阅专栏

canvas中getImageData方法

##定义和方法

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData 对象的data属性中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <canvas id="canvas" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
  let img = new Image()
  let canvas = document.getElementById('canvas')
  let ctx = canvas.getContext('2d')
  img.onload = function () {
    ctx.drawImage(img, 0, 0)
    img.style.display = 'none'
    let imgData = (ctx.getImageData(0, 0, img.width, img.height))
/**
for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
*/
    console.log(imgData.data[0], imgData.data[1], imgData.data[2], imgData.data[3])
  }
  img.src = "https://upload.jianshu.io/users/upload_avatars/27739989/0302ae91-d206-44b8-bb00-877e96689dde.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120"
  img.crossOrigin = "anonymous"
</script>
</html>

rgba() 4个值都为0-255范围
imgData[0] red
imgData[1] green
imgData[2] blue
imgData[3] Alpha

getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布
#颜色反转

for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);