element-ui 图片压缩上传

picture.js

js 复制代码
export const compressImgNew = (file) => {
  return new Promise(resolve => {
    const reader = new FileReader()
    const image = new Image()
    image.onload = (imageEvent) => {
      const canvas = document.createElement('canvas') // 创建画布
      const context = canvas.getContext('2d')         // 画布为2d
      // const width = image.width / 1.05        // 图片宽度 / 压缩比例
      // const height = image.height / 1.05        // 图片高度 / 压缩比例
      const width = image.width / 3       // 图片宽度 / 压缩比例
      const height = image.height / 3       // 图片高度 / 压缩比例
      canvas.width = width                            // 画布宽度
      canvas.height = height                          // 画布宽度
      context.clearRect(0, 0, width, height)
      context.drawImage(image, 0, 0, width, height)
      const dataUrl = canvas.toDataURL(file.type)     //图片转路径
      const blobData = dataURLtoBlob(dataUrl, file.type) //图片转二进制
      resolve(blobData)
    }
    reader.onload = e => { image.src = e.target.result }
    reader.readAsDataURL(file)
  })
};

//图片转二进制
function dataURLtoBlob(dataURL, type) {
  var binary = atob(dataURL.split(',')[1])
  var array = []
  for (var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i))
  }
  return new Blob([new Uint8Array(array)], { type: type })
}

使用

import { compressImgNew } from "@/assets/js/picture.js";

js 复制代码
    beforeAvatarUpload(file) {
      let types = [
        "image/jpeg",
        "image/jpg",
        "image/png"
      ];
      const isImage = types.includes(file.type);
      const isLtSize = file.size / 1024 / 1024 < 5;
      if (!isImage) {
        this.$message.warning("上传图片只能是 JPG、JPEG、PNG 格式!");
        return false;
      }
      if (!isLtSize) {
        this.$message.warning("上传图片大小不能超过 5MB!");
        return false;
      }
      return compressImgNew(file);
    },
相关推荐
初心w50t210 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
{⌐■_■}10 分钟前
【软件工程】tob和toc含义理解
前端·数据库·mysql·golang·软件工程·tidb
码农捻旧1 小时前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor1 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤1 小时前
Vue 高级视频播放器实现指南
前端
FogLetter1 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
轻语呢喃1 小时前
js事件机制:监听、捕获、冒泡与委托
javascript
小公主2 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端