1、canvas修改图片亮度，通过RGB和HSV之间的转换修改图片的亮度
1、从RGB到HSV的转换
// arr: rgb数组
rgbByhsv (arr) {
let rr;
let gg;
let bb;
let r = arr[0] / 255;
let g = arr[1] / 255;
let b = arr[2] / 255;
let h;
let s;
let v = Math.max(r, g, b);
let diff = v - Math.min(r, g, b);
let diffc = function (c) {
return (v - c) / 6 / diff + 1 / 2;
};
if (diff === 0) {
h = s = 0;
} else {
s = diff / v;
rr = diffc(r);
gg = diffc(g);
bb = diffc(b);
if (r === v) {
h = bb - gg;
} else if (g === v) {
h = (1 / 3) + rr - bb;
} else if (b === v) {
h = (2 / 3) + gg - rr;
}
if (h < 0) {
h += 1;
} else if (h > 1) {
h -= 1;
}
}
return [Math.round(h * 360), Math.round(s * 100), Math.round(v * 100)];
}
2、从HSV到RGB的转换
hsvByrgb (hsv) {
let _l = hsv[0];
let _m = hsv[1];
let _n = hsv[2];
let newR;
let newG;
let newB;
if (_m === 0) {
_l = _m = _n = Math.round(255 * _n / 100);
newR = _l;
newG = _m;
newB = _n;
} else {
_m = _m / 100;
_n = _n / 100;
let p = Math.floor(_l / 60) % 6;
let f = _l / 60 - p;
let a = _n * (1 - _m);
let b = _n * (1 - _m * f);
let c = _n * (1 - _m * (1 - f));
switch (p) {
case 0:
newR = _n; newG = c; newB = a;
break;
case 1:
newR = b; newG = _n; newB = a;
break;
case 2:
newR = a; newG = _n; newB = c;
break;
case 3:
newR = a; newG = b; newB = _n;
break;
case 4:
newR = c; newG = a; newB = _n;
break;
case 5:
newR = _n; newG = a; newB = b;
break;
}
newR = Math.round(255 * newR);
newG = Math.round(255 * newG);
newB = Math.round(255 * newB);
}
return [newR, newG, newB];
}
3、实现亮度的调整
<body>
<img src="./pic.jpg" id="pic">
<canvas id="canvas" width="200" height="273"></canvas>
</body>
const pic = document.querySelector('#pic');
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(pic, 0, 0, 200, 273);
const imgData = ctx.getImageData(0, 0, 200, 273);
// 降低50%的亮度
ctx.putImageData(this.changeLuminance(imgData, -0.5), 0, 0);
// 修改图片亮度, imgdata为从canvas获取到的rgba数组，value为需要增加或减少的亮度值（0~1）
changeBrightness (imgdata, value) {
const data = imgdata.data;
for (let i = 0; i < data.length; i+=4) {
const hsv = this.rgbByhsv([data[i], data[i + 1], data[i + 2]]);
hsv[2] *= (1 + value);
const rgb = this.hsvByrgb(hsv);
data[i] = rgb[0];
data[i + 1] = rgb[1];
data[i + 2] = rgb[2];
}
return imgdata;
}
2、canvas修改图片对比度
<div ref="leftContentRef">
<canvas
id="leftCanvasOne"
ref="leftCanvasOne"
></canvas>
</div>
drawCanvas() {
// 赋值canvas的宽度;
let myCanvas = this.$refs.leftCanvasOne;
myCanvas.width = this.$refs.leftContentRef.clientWidth;
myCanvas.height = this.$refs.leftContentRef.clientHeight;
//加载图片进行存储使用 imageUrl为图片url
let image= new Image();
image.src = this.imageUrl;
image.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height；
let imgData = ctx.getImageData(0, 0, w, image.height).data;
// 图片颜色平均值
let sumRed = 0;
let sumGreen = 0;
let sumBlue = 0;
for (let i = 0; i < imgData .length; i += 4) {
sumRed += imgData [i];
sumGreen += imgData [i + 1];
sumBlue += imgData [i + 2];
}
// 输出平均值
const averageRed = Math.ceil(sumRed / (imgData .length / 4));
const averageGreen = Math.ceil(sumGreen / (imgData .length / 4));
const averageBlue = Math.ceil(sumBlue / (imgData .length / 4));
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
imgData.data[i] =
R + (R - averageRed + 10) * (1 / (1 - averageRed / 255) - 1);
imgData.data[i + 1] =
G + (G - averageGreen + 10) * (1 / (1 - averageRed / 255) - 1);
imgData.data[i + 2] =
B + (B - averageBlue + 10) * (1 / (1 - averageRed / 255) - 1);
}
ctx.putImageData(imgData, 0, 0);
};
}
