canvas图片调整对比度
2021-05-20 本文已影响0人
未來Miral
// 提高对比度, 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;
});
}