vue 前端(elementUI)图片压缩转base64_element上传图片压缩之后转base64-CSDN博客

本文介绍如何使用ElementUI框架在前端实现图片压缩及转换为Base64编码，以优化图片存储并减少数据库负担。通过自定义上传组件，利用Canvas进行图像缩放和质量调整，最终将图片数据以Base64格式保存。

因图片需要转base64编码存入数据库,获取数据较大,所以压缩图片

前端框架:element UI

 <el-upload 
              class="avatar-uploader"
              action='#'
              accept="image/*"
              :show-file-list="false"
              :before-upload="getFileIcon"
            >
            <img v-if="form.iconURL" :src="form.iconURL" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

getFileIcon(file) {
      imgShrink(file,120,120).then(res => {
        this.form.iconURL = res
      });
    },

关键:

// 压缩图片
export function imgShrink(file,imgWidth,imgHeight) {
  return new Promise(function(resolve, reject) {
    let imgResult = ""
    var width = imgWidth || 100 //图像大小
    var height = imgHeight || 100//图像大小
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      let img = new Image();
      img.src = this.result;
      let quality = 0.8, //图像质量 取值0-1 值越小，所绘制出的图像越模糊
      canvas = document.createElement("canvas"),
      drawer = canvas.getContext("2d");
      img.onload = function () {
        canvas.width = width;
        canvas.height = height;
        drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 返回base64
        imgResult = canvas.toDataURL("image/png", quality);
        resolve(imgResult);
      }
    };
    reader.onerror = function(error) {
      reject(error);
    };
  });
}