前端图片上传，图片预览及过大压缩处理 canvas+base64

在做网页的时候可能会遇到需要上传图片来修改头像或者其他资料的问题。

本篇博客用来解决上传图片中遇到的一些问题

上传

本人用的是vue框架

首先通过

1	<input type="file" >

来进行文件提交选择指定文件类型为image

1 2	<img :src ="HeadUrl"> <input type="file" style="display: none" accept="image/*" @change="select_img" >

调用change事件，当选择文件改变的时候触发select_img事件

通过readAsDataURL()来进行图片预览，

select_img: function (e) {//当input file值改变时触发的事件
      var vm = this;
      this.file = event.target.files[0];
      const reader = new FileReader();//图片预览
      reader.readAsDataURL(this.file);
      reader.onload = (e) => {
          const src = e.target.result;
          vm.HeadUrl = src;
      }

    }

FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。

到这里应该就完成预览图片的功能

图片太大压缩处理

一般来说上传的图片不能过大，否则会使服务器负载较大，所以我们需要获取指定文件的大小来判断

select_img: function (e) {//当input file值改变时触发的事件
      var vm = this;

      var img_size = event.target.files[0].size; //用来判断大小

      this.file = event.target.files[0];

      vm.filename = this.file.name;
      const reader = new FileReader();//图片预览
      reader.readAsDataURL(this.file);
      reader.onload = (e) => {
        if (img_size >= 1024 * 1024 * 0.5) { //意思是大于0.5m 就进行处理
          console.log("图片太大")
          vm.compressImage(e.target.result);//调用自定义方法来处理图片
        }
        else {
          const src = e.target.result;
          vm.HeadUrl = src;
        }
      }

    }

到这里我们如果图片太大会进行自定义方法compressImage来压缩

compressImage: function (bdata) {//压缩图片
      var _this = this;
      var quality = 0.3; //压缩图片的质量
      var oldimglength = bdata.length;//压缩前的大小
      var compresRadio = 0;// 压缩率

      var canvas = document.createElement("canvas"); //创建画布
      var ctx = canvas.getContext("2d");

      var img = new Image();
      img.src = bdata;
      img.onload = function(){
        var width = img.width;
        var height = img.height;
        canvas.width = 100;   //这里可以自定义你的图片大小
        canvas.height = 100 * (img.height / img.width);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var cdata = canvas.toDataURL("image/jpeg",quality);  //将图片转为Base64 之后预览要用

        _this.HeadUrl = cdata; //预览你压缩后的图片
        var newimglength = cdata.length;
        console.log("img-blob:"+oldimglength)//压缩前大小
        console.log("ctx-blob:"+newimglength) //压缩后大小
        compresRadio = (((oldimglength-newimglength)/oldimglength*100).toFixed(2))+'%';
        console.log("压缩率:"+compresRadio)
      }
    }
  }

这样一来你的img HeadUrl 就是压缩后的图片大小了

base64转成file类型

因为公司后台接口的问题，我们并不是通过传base64和后台对接，而是指定一个file类型文件，如下

所以我还需要进行base64转成file类型处理- -

var arr = cdata.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
  u8arr[n] = bstr.charCodeAt(n);
}

_this.newFile =new File([u8arr],_this.filename, {type:mime});

new File()具体参数可以参考:JavaScript File对象的初始化_js new file-CSDN博客

原理:readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。

到这里已经完成压缩后的图片base64 转成 file 类型，然后你就可以跟后台的端口进行对接