canvas图片调整对比度

        // 提高对比度, threshold => 图片灰度平均值, contrast=>对比度
        setContrast(base64, threshold, contrast) {
            return new Promise((resolve, reject) => {
                const image = new Image();
                image.onload = () => {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    const w = image.width;
                    const h = image.height;
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(image, 0, 0, w, h);
                    let imgData = ctx.getImageData(0, 0, w, h);
                    for (let i = 0; i < imgData.data.length - 4; i += 4) {
                        const R = imgData.data[i]; // red
                        const G = imgData.data[i + 1]; // green
                        const B = imgData.data[i + 2]; // blue
                        // const A = imgData.data[i + 3]; // alpha
                        if(contrast) {
                            imgData.data[i] = R + (R - threshold) * (1 / (1 - contrast / 255) - 1);
                            imgData.data[i + 1] = G + (G - threshold) * (1 / (1 - contrast / 255) - 1);
                            imgData.data[i + 2] = B + (B - threshold) * (1 / (1 - contrast / 255) - 1);
                        }
                        else {
                            imgData.data[i] = R + (R - threshold) * contrast / 255;
                            imgData.data[i + 1] = G + (G - threshold) * contrast / 255;
                            imgData.data[i + 2] = B + (B - threshold) * contrast / 255;
                        }
                    }
                    ctx.putImageData(imgData, 0, 0);
                    resolve(canvas.toDataURL('image/jpeg'));
                };
                image.src = base64;
            });
        }

你可能感兴趣的:(canvas图片调整对比度)