Web 实现拾色器

根据 getgetImageData 实现拾色器功能

getgetImageData API 定义：

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

封装一个方法获取拾色器参数

class PickColor {
    constructor({ element, bgImgSrc, style }) {
        this.cavs = document.createElement('canvas');
        element.appendChild(this.cavs);
        // 设置canvs 内部属性样式
        for (let key in style) {
            this.cavs.style[key] = style[key]
        }
        // 设置canvs的 宽高
        this.cavs.height = element.clientHeight;
        this.cavs.width = element.clientWidth;
        // 视窗相对合集
        this.cavsClientRect = element.getBoundingClientRect();
        this.colorValue = null;

        // 将图片传入画布
        this.ctx = this.cavs.getContext('2d');
        this.bgImg = new Image();
        this.bgImg.src = bgImgSrc;
        // 加载图片
        this.bgImg.onload = () => {
            this.ctx.drawImage(this.bgImg, 0, 0, this.cavs.width, this.cavs.height);
        }
        // 捕获节点执行对应方式
        this.cavs.addEventListener("click", this._pickColor, true);
        this.cavs.oncontextmenu = () => false;
    }

    // 拾取颜色
    _pickColor = (event) => {
        this._clearCanvas(); //拾取新的颜色的时候清空画布
        let loc = this._getCoordinate(event.pageX, event.pageY);
        let { data } = this.ctx.getImageData(loc.x, loc.y, 1, 1);
        this._drawDot(loc); //获取到rgba后画点；
        let r = data[0];
        let g = data[1];
        let b = data[2];
        let a = Math.round(data[3] / 255 * 100) / 100;
        let rHex = r.toString(16);
        r < 16 && (rHex = "0" + rHex);
        let gHex = g.toString(16);
        g < 16 && (gHex = "0" + gHex);
        let bHex = b.toString(16);
        b < 16 && (bHex = "0" + bHex);
        let rgbColor = `rgb(${r},${g},${b})`;
        let rgbaColor = `rgba(${r},${g},${b},${a})`;
        let hexColor = `#${rHex}${gHex}${bHex}`;
        this.colorValue = {
            rgba: rgbaColor,
            rgb: rgbColor,
            hex: hexColor,
            r: r,
            g: g,
            b: b,
            a: a
        }
        return this.colorValue;
    }

    // 获取真实的坐标
    _getCoordinate(pageX, pageY) {
        let coordinate = {
            x: pageX - this.cavsClientRect.x,
            y: pageY - this.cavsClientRect.y
        }
        return coordinate;
    }

    // 清空画布
    _clearCanvas() {
        let height = this.cavs.height;
        let width = this.cavs.width;
        this.ctx.clearRect(0, 0, width, height);
        //清空画布后将背景图片添加
        this.ctx.drawImage(this.bgImg, 0, 0, this.cavs.width, this.cavs.height);
    }

    // 绘制一个点
    _drawDot(loc, r = 8) {
        this.ctx.shadowBlur = 10;
        this.ctx.shadowColor = 'rgba(0,0,0,0.3)';
        this.ctx.lineWidth = 2;
        this.ctx.strokeStyle = 'rgba(255,255,255,.8)';
        this.ctx.beginPath();
        this.ctx.arc(loc.x, loc.y, r, 0, 4 * Math.PI);
        this.ctx.stroke();
    }

    // 获取点击点的设置
    getColor() {
        return this.colorValue;
    }
}

使用方法

let canvs = new PickColor({
    element: document.getElementById('canvs'),
    bgImgSrc: './img/bgcolor.png',
    style: {
        borderRadius: '50%',
    }
})

gitee地址

https://gitee.com/Cliaoxiang/color-picker