0
点赞
收藏
分享

微信扫一扫

利用promise实现图片异步压缩

棒锤_45f2 2022-04-03 阅读 89

/**

 * 异步压缩

 * @param {*} imgfile 上传的文件

 * @returns urlBase64  处理后的base64字符串

 */

const compressImgSync = (imgfile) => {

  return new Promise((resolve, reject) => {

    let img = new Image()

    let cvs = document.createElement('canvas')

    let file = imgfile.file // 获取到文件对象

    // 上传的图片大于400KB时才压缩

    if (file && file.size / 1024 > 400) {

      let reader = new FileReader()

      reader.readAsDataURL(file) // 转成 base64 编码

      reader.onload = function (e) {

        let naturalBase64 = e.target.result // 获取 base64 编码,这是原图的

        img.src = naturalBase64

        img.onload = function () {

          let ratio = img.naturalWidth / img.naturalHeight // 获取原图比例,为了等比压缩

          cvs.width = 400 // 设定canvas的宽度

          cvs.height = cvs.width / ratio // 根据原图片压缩比例计算canvas的高度

          let ctx = cvs.getContext('2d')

          ctx.drawImage(img, 0, 0, cvs.width, cvs.height) // 画在 canvas 上

          // 压缩后新图的 base64

          let zipBase64 = cvs.toDataURL()

          if (zipBase64) {

            let urlBase64 = zipBase64.split(',')[1]

            console.log('走压缩')

            resolve(urlBase64)

          }

        }

      }

    } else { // 上传的图片400KB以下,取原文件base64

      console.log('不走压缩')

      let urlBase64 = imgfile.content.split(',')[1]

      resolve(urlBase64)

    }

  }).then(res => {

    return res

  }).catch(res => {

  })

}

举报

相关推荐

0 条评论