前端小功能：图片对比度。

前端小功能：图片对比度。

图片对比度
css，filter已经实现很多图片的功能了，抛弃IE，及一些不潮流的浏览器，直接使用css属性就好了。

filter: contrast(${contrastNum})

无奈如果要兼容IE的话，就是最新版IE11，这些css都没有效果
百度都是用

progid:DXImageTransform.Microsoft处理，但是我实在是不会搞，怎么试都没有效果，找不到具体的官网，很文档。哎自己实在太弱了。
只好用canvas处理一下了，记录一下，比较很少用到的吧。以后就不要兼容IE了
示例：
先缓存图片，ajax，保持图片源不被污染，IE禁止通过Image跨域请求图片

function handleGetBlob(baseUrl) {
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest()
      xhr.open('GET', baseUrl, true)
      xhr.responseType = 'blob'
      xhr.onload = function(option:any) {
        let res = option.target
        if (res.status === 200) {
          const bloburl = window.URL.createObjectURL(res.response)
          resolve(bloburl)
        }else{
          reject(baseUrl)
        }
      }
      xhr.send()
    })
  }
  function handleGetImage(baseUrl) {
    return new Promise((resolve) => {
      const image = new Image();
      image.src = baseUrl;
      image.onload = function() {
        resolve(image)
      }
    })
  }

然后再用canvas装换图片对比度就好了

async function contrastImage(image, contrast){
    if(!HTMLCanvasElement.prototype.toBlob){
      Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
        value:function(callback,type,quality){
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        let canvas = this;
        setTimeout(function () {
          let binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
          let len = binStr.length;
          let arr = new Uint8Array(len);
          for (let i = 0; i < len; i++) {
            arr[i] = binStr.charCodeAt(i);
            }
            callback(new Blob([arr], {
              type: type || 'image/png'
            }));
          });
        }
      });
    }
    return new Promise((resolve, reject) => {
      try {
        let canvas = document.createElement('canvas');
        if (canvas.getContext) {
          let ctx = canvas.getContext('2d');
          canvas.height = image.height;
          canvas.width = image.width;
          ctx.drawImage(image, 0, 0);
          let imageD = ctx.getImageData(0, 0, image.width, image.height);
          let pdata:any = imageD.data;
          const cont = (Number(contrast)/10)
          const avg = 127;
          for (let i = 0; i < pdata.length; i+=4) {
            let r = pdata[i]
            let g = pdata[i+1]
            let b = pdata[i+2]
            // pdata[i] = r + contrast;
            // pdata[i + 1] = g + contrast;
            // pdata[i + 2] = b + contrast;
            if((r+(r-avg)*cont)>255){
              pdata[i]=255;
            }else if((r+(r-avg)*cont)<0){
              pdata[i]=0;
            }else {
              pdata[i] = r+(pdata[i+1]-avg)*cont;
            }
            
            if((g+(g-avg)*cont)>255){
              pdata[i+1]=255;
            }else if((g+(g-avg)*cont)<0){
              pdata[i+1]=0;
            }else {
              pdata[i+1] = g+(g-avg)*cont;
            }

            if((b+(b-avg)*cont)>255){
              pdata[i+2]=255;
            }else if((b+(b-avg)*cont)<0){
              pdata[i+2]=0;
            }else {
              pdata[i+2] = b+(b-avg)*cont;
            }
          }
          ctx.putImageData(imageD, 0, 0);
          canvas.toBlob(function(blob) {
              const bloburl = window.URL.createObjectURL(blob)
              resolve(bloburl)
          });
          canvas = null;
        }
      } catch (error) {
        reject(contrastUrl)
      }
    })
  }

处理导出的是URL，直接绑定img就可以了。
注释部分，是图片亮度的显示方式。

推荐一下，图片处理Javascript的文章: https://blog.csdn.net/phg1024/article/details/16332711

继续推荐一下：https://www.cnblogs.com/fsjohnhuang/p/4127888.html#a7

https://www.cnblogs.com/jwm1999/p/13056344.html

 

 

async function contrastImage(image, contrast){

    if(!HTMLCanvasElement.prototype.toBlob){

      Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {

        value:function(callback,type,quality){

        // eslint-disable-next-line @typescript-eslint/no-this-alias

        let canvas = this;

        setTimeout(function () {

          let binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);

          let len = binStr.length;

          let arr = new Uint8Array(len);

          for (let i = 0; i < len; i++) {

            arr[i] = binStr.charCodeAt(i);

            }

            callback(new Blob([arr], {

              type: type || 'image/png'

            }));

          });

        }

      });

    }

    return new Promise((resolve, reject) => {

      try {

        let canvas = document.createElement('canvas');

        if (canvas.getContext) {

          let ctx = canvas.getContext('2d');

          canvas.height = image.height;

          canvas.width = image.width;

          ctx.drawImage(image, 0, 0);

          let imageD = ctx.getImageData(0, 0, image.width, image.height);

          let pdata:any = imageD.data;

          const cont = (Number(contrast)/10)

          const avg = 127;

          for (let i = 0; i < pdata.length; i+=4) {

            let r = pdata[i]

            let g = pdata[i+1]

            let b = pdata[i+2]

            // pdata[i] = r + contrast;

            // pdata[i + 1] = g + contrast;

            // pdata[i + 2] = b + contrast;

            if((r+(r-avg)*cont)>255){

              pdata[i]=255;

            }else if((r+(r-avg)*cont)<0){

              pdata[i]=0;

            }else {

              pdata[i] = r+(pdata[i+1]-avg)*cont;

            }

            

            if((g+(g-avg)*cont)>255){

              pdata[i+1]=255;

            }else if((g+(g-avg)*cont)<0){

              pdata[i+1]=0;

            }else {

              pdata[i+1] = g+(g-avg)*cont;

            }

            if((b+(b-avg)*cont)>255){

              pdata[i+2]=255;

            }else if((b+(b-avg)*cont)<0){

              pdata[i+2]=0;

            }else {

              pdata[i+2] = b+(b-avg)*cont;

            }

          }

          ctx.putImageData(imageD, 0, 0);

          canvas.toBlob(function(blob) {

              const bloburl = window.URL.createObjectURL(blob)

              resolve(bloburl)

          });

          canvas = null;

        }

      } catch (error) {

        reject(contrastUrl)

      }

    })

  }

没有终点，没有彼岸，坚持就好，愿岁月如初