vue项目中图片白色背景透明化处理

在项目开发中遇到处理图片背景的问题,需要将bmp格式的图片中的白色背景进行透明处理,同时转化为png的格式,做个笔记记录一下解决方法。
touMing(dataImg, callback) {
      let self = this;
      var base64Img = document.createElement("base64Img"),
        canvas = document.createElement("canvas"),
        context = canvas.getContext("2d");
      // 创建新图片
      var img = new Image();
      img.src = "data:image/bmp;base64," + dataImg;
      img.addEventListener(
        "load",
        function() {
          // 绘制图片到canvas上
          canvas.width = img.width;
          canvas.height = img.height;
          context.drawImage(img, 0, 0);

          // 将canvas的透明背景设置成白色
          var imageData = context.getImageData(
            0,
            0,
            canvas.width,
            canvas.height
          );
          for (var i = 0; i < imageData.data.length; i += 4) {
            //rgb大于250的透明度y均设置成0
            if (
              imageData.data[i] > 250 &&
              imageData.data[i + 1] > 250 &&
              imageData.data[i + 2] > 250
            ) {
              imageData.data[i + 3] = 0;
            }
          }
          context.putImageData(imageData, 0, 0);
          self.baseImg = canvas.toDataURL("image/png").slice(22);//返回base64
          if (typeof callback !== undefined) {
            if (callback) callback(self.baseImg);
          }
        },
        false
      );
    },

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一些名词:jpg(jpeg),png,gif,webp,bmp,apng,base64,svg,雪碧图,图标字体 ...
    阿r阿r阅读 7,287评论 0 6
  • 图片各种格式全解析 前言 随着web的发展,网站资源的流量也变得越来越大。据统计,60% 的网站流量均来自网站图片...
    勿忘巛心安阅读 1,055评论 0 1
  • 特此声明,本人不是做美工的。仅仅是出于好奇,加上之前上学时在老师帮助下做过一些图片处理和分析,所以在此做些记录,满...
    WhisperSilence阅读 1,755评论 0 0
  • 最近妹妹身体不舒服,给她吃的清单,总是没胃口。这两天感觉她精神脸色都过来一些,就炖了点排骨汤,刚开始怕她不吃就给她...
    悦米时光阅读 155评论 0 0
  • 每日精选笑话: 老婆是个杠精 老婆同学聚会。发短信来:老公,跟她们一起好无聊,你打电话叫我回去吧,温柔点我开免提。...
    火锅家族阅读 604评论 1 5