原生js实现上传图片按比例压缩方案【附带插件方案】

K.P

已于 2023-03-22 23:45:42 修改

阅读量1k

点赞数 1

分类专栏：前端 npm vue 文章标签： javascript 前端 html

于 2023-03-22 23:42:16 首次发布

本文链接：https://blog.csdn.net/weixin_44314609/article/details/129721759

版权

npm 同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

vue

28 篇文章 2 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

文章提供了一种JavaScript实现图片压缩的方法，包括从base64转回File对象，以及使用canvas进行图片压缩。代码示例展示了如何在Vue应用中，通过监听文件输入事件，读取图片，然后压缩图片并上传至服务器。此外，还提及了其他压缩库如compressorjs和Vue相关的图片压缩组件。

摘要由CSDN通过智能技术生成

创建utils/compressed.js文件

//base64转码（压缩完成后的图片为base64编码，这个方法可以将base64编码转回file文件）
function dataURLtoFile(dataurl) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  // suffix是该文件的后缀
  let suffix = mime.split('/')[1]
  // atob 对经过 base-64 编码的字符串进行解码
  let bstr = atob(arr[1])
  // n 是解码后的长度
  let n = bstr.length
  // Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
  let u8arr = new Uint8Array(n)
  // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  // new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
  // 第三个参数是 要放到文件中的内容的 MIME 类型
  return new File([u8arr], `file.${suffix}`, {
    type: mime
  })
}
//压缩图片
function compressImg(file) {
  var src
  var files
  var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2)
  var read = new FileReader()
  read.readAsDataURL(file)
  return new Promise(function (resolve, reject) {
    read.onload = function (e) {
      var img = new Image()
      img.src = e.target.result
      img.onload = function () {
        //默认按比例压缩
        var w = this.width,
          h = this.height
        //生成canvas
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')
        var base64
        // 创建属性节点
        canvas.setAttribute('width', w)
        canvas.setAttribute('height', h)
        ctx.drawImage(this, 0, 0, w, h)
        if (fileSize < 0.5) {
          //如果图片小于500k 那么不执行压缩操作
          resolve(file)
          return
        } else if (fileSize >= 0.5 && fileSize < 1) {
          //如果图片大于500k并且小于1M 那么压缩0.5
          base64 = canvas.toDataURL(file['type'], 0.5)
        } else {
          //如果图片超过1m 那么压缩0.2
          base64 = canvas.toDataURL(file['type'], 0.2)
        }
        // 回调函数返回file的值（将base64编码转成file）
        files = dataURLtoFile(base64) //如果后台接收类型为base64的话这一步可以省略

        resolve(files)
      }
    }
  })
}

//结尾处将该方法暴露出来供外部调用
export default {
  compressImg
}

// html
<input
          v-show="false"
          ref="inputFileTarget"
          class="inputFileTarget"
          type="file"
          accept="image/*"
          multiple
          @change="onSelectImgHandler"
        />
        
<button @click="uploadFile">上传</button>

// js
import compressed from '@/utils/compressed'

// 点击上传图片
uploadFile() {
    this.$refs.inputFileTarget.dispatchEvent(new MouseEvent('click'))
},
// 上传图片 点击确认或取消
async onSelectImgHandler(e) {
	// 获取单张图片
      const target = e.target.files[0]
      // 点击取消判断
      if (!target) return
      // 菊花转起来
      this.uploadLoading = this.$toast.loading()
      // 对图片进行压缩
      const file = await compressed.compressImg(target)
      // 后端接口需要上传file文件 进行转化
      const formData = new FormData()
      formData.append('file', file)
      // 调后端接口上传 formData
      // this.upload(formData)
    },

以上便是js实现上传图片压缩方案一，当然其他插件的方案也有很多，如下：
1、compressorjs
2、pica
3、ImageOptim

Vue的压缩图片插件：
1、vue-image-compressor
2、vue-core-image-upload
3、vue-simple-upload