javascript求图片的主题色canvas中getImageData方法

60 阅读 0 评论 40 点赞

我是靠谱客的博主大意热狗，最近开发中收集的这篇文章主要介绍javascript求图片的主题色canvas中getImageData方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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);