canvas 亮度调整

	init() {
		const canvas = this.$refs.text_canvas;
    	const ctx = this.canvas.getContext("2d");
    	ctx.drawImage(this.img, 0, 0, 930, 515);
        const imgData = ctx.getImageData(0, 0, 930, 515);
		ctx.putImageData(changeLuminance(imgData, -0.4), 0, 0);
		//...
	}

    changeLuminance(imgdata, value) {
      const data = imgdata.data;
      for (let i = 0; i < data.length; i += 4) {
        const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]);
        hsv[2] *= 1 + value;
        const rgb = this.hsv2rgb([...hsv]);
        data[i] = rgb[0];
        data[i + 1] = rgb[1];
        data[i + 2] = rgb[2];
      }
      return imgdata;
    },
    rgb2hsv(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)];
    },
    hsv2rgb(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];
    },
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值