uniapp H5中图片上传前压缩

 

使用处

两个基本函数

// 图片压缩函数
            compressImg (file) {
               const that = this
               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
                     var 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 < 1) {
                       // 如果图片小于一兆 那么压缩0.5
                       base64 = canvas.toDataURL(file['type'], 0.5)
                     } else if (fileSize > 1 && fileSize < 2) {
                       // 如果图片大于1M并且小于2M 那么压缩0.5
                       base64 = canvas.toDataURL(file['type'], 0.5)
                     } else {
                       // 如果图片超过2m 那么压缩0.2
                       base64 = canvas.toDataURL(file['type'], 0.2)
                     }
                     // 回调函数返回file的值(将base64编码转成file)
                     files = that.dataURLtoFile(base64, file.name) // 如果后台接收类型为base64的话这一步可以省略
                     resolve(files)
                   }
                 }
               })
            },
            // base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件)
            dataURLtoFile (dataurl, filename) {
                var arr = dataurl.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)
                }
                return new File([u8arr], filename, { type: mime })
            }

此时拿到的就是压缩后的file了~

posted on 2023-06-06 18:09  贲风  阅读(678)  评论(0)    收藏  举报