通过canvas获取图片的颜色值

前言

两篇以前的文章还是很有用的：

canvas将图片转成点阵
vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题

实现

将图片添加到canvas中

<template>
    <div>
        <el-button type="primary" @click="loadImage">加载图片</el-button>
        <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
        </canvas>
    </div>
</template>

<script setup lang="ts">
import { nextTick } from 'vue';

// 加载图片
import imgSrc from '../../../assets/logo.png';

const loadImage = () => {
    nextTick(() => {
        // 创建图片
        const image = document.createElement('img');
        image.src = imgSrc;
        image.width = 200;
        image.height = 200;
        // 获取canvas
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        // 将图片添加到画布上
        ctx.drawImage(image, 0, 0);
    });
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

获取像素点的颜色值

// 图片像素，获取从（20，20）开始宽高为10的图片的像素
 const imageData = ctx.getImageData(20, 20, 10, 10).data;
 console.log('像素：', imageData);
1
2
3

四个数字是一组代表rgba，像素点的个数是 宽度 * 长度 * 4

获取rgba

获取颜色还是比较简单的无非是进行循环，四个数字一组转成rgba的格式。
不过有一个点要注意：
css中的rgba的a 是 0~1，0完全透明，1完全不透明。具体见：CSS rgba() 函数
getImageData 返回的a是 0~255，0完全透明，255是不透明的（即完全可见）。具体见：canvas getImageData() 方法

const rgbaList = [];
 // 将像素转为rgba
 for (let i = 0; i < imageData.length; i += 4) {
     const r = imageData[i];
     const g = imageData[i + 1];
     const b = imageData[i + 2];
     const a = imageData[i + 3] / 255;
     rgbaList.push(`rgba(${r},${g},${b},${a})`);
 }
 console.log('颜色：', rgbaList);
1
2
3
4
5
6
7
8
9
10

rgba与16进制颜色之间的转换

rgba转16进制

// 数字转16进制
const toHex = (n:number) => {
    return `${n > 15 ? '' : 0}${n.toString(16)}`;
};

// rgba 转16进制
const toHexString = (rgba:string) => {
    const rgbaStr = rgba.replace(/[rgba|(|)]/g, '');
    const rbgaList = rgbaStr.split(',').map(e => parseInt(e));
    const hexStr = `#${toHex(rbgaList[0])}${toHex(rbgaList[1])}${toHex(rbgaList[2])}${rbgaList[3] === 1 ? '' : toHex(Math.floor(rbgaList[3] * 255))}`;
    console.log(hexStr);
    return hexStr;
};
1
2
3
4
5
6
7
8
9
10
11
12
13

16进制转rgba

// 16进制转rgba
const parseHexColor = (color: string) => {
    let hex = color.slice(1);
    let a = 1;
    if (hex.length === 3) {
        hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
    }
    if (hex.length === 8) {
        a = parseInt(hex.slice(6), 16) / 255;
        hex = hex.slice(0, 6);
    }
    const bigint = parseInt(hex, 16);
    return {
        r: (bigint >> 16) & 255,
        g: (bigint >> 8) & 255,
        b: bigint & 255,
        a
    };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19