根據(jù) getgetImageData 實(shí)現(xiàn)拾色器功能

getgetImageData API 定義：

getImageData() 方法返回 ImageData 對(duì)象，該對(duì)象拷貝了畫布指定矩形的像素?cái)?shù)據(jù)。

封裝一個(gè)方法獲取拾色器參數(shù)

class PickColor {
    constructor({ element, bgImgSrc, style }) {
        this.cavs = document.createElement('canvas');
        element.appendChild(this.cavs);
        // 設(shè)置canvs 內(nèi)部屬性樣式
        for (let key in style) {
            this.cavs.style[key] = style[key]
        }
        // 設(shè)置canvs的 寬高
        this.cavs.height = element.clientHeight;
        this.cavs.width = element.clientWidth;
        // 視窗相對(duì)合集
        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);
        }
        // 捕獲節(jié)點(diǎn)執(zhí)行對(duì)應(yīng)方式
        this.cavs.addEventListener("click", this._pickColor, true);
        this.cavs.oncontextmenu = () => false;
    }

    // 拾取顏色
    _pickColor = (event) => {
        this._clearCanvas(); //拾取新的顏色的時(shí)候清空畫布
        let loc = this._getCoordinate(event.pageX, event.pageY);
        let { data } = this.ctx.getImageData(loc.x, loc.y, 1, 1);
        this._drawDot(loc); //獲取到rgba后畫點(diǎn)耙箍；
        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},$)`;
        let rgbaColor = `rgba(${r},${g},$饥悴,${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;
    }

    // 獲取真實(shí)的坐標(biāo)
    _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);
    }

    // 繪制一個(gè)點(diǎn)
    _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();
    }

    // 獲取點(diǎn)擊點(diǎn)的設(shè)置
    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