上传前利用canvas图片压缩

一步一步往前走！

于 2023-02-24 16:26:55 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44957344/article/details/129203164

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片压缩</title>
</head>

<body>
  <input type="file">
  <div id="orginsize">原大小:</div>
  <div id="size">压缩后的大小:</div>

  <script>
    let inp = document.querySelector('input')
    let orginsize = document.querySelector('#orginsize')
    let size = document.querySelector('#size')
    inp.onchange = function (e) {
      let file = e.target.files[0]
      orginsize.innerHTML = orginsize.innerHTML + file.size
      const img = new Image()
      const reader = new FileReader()
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        img.src = e.target.result
      }
      img.onload = function () {
        gzip(img, file.type, file.name, 0.5)
      }
    }

    function gzip(img, type, name, encoderOptions) {
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      const { width, height } = img
      canvas.width = width
      canvas.height = height
      context.clearRect(0, 0, width, height)
      context.drawImage(img, 0, 0, width, height)
      const compressImage = canvas.toDataURL(type, encoderOptions); // encoderOptions压缩的比例0-1
      let imgEl = new Image()
      imgEl.src = compressImage
      // 调用转成file格式
      let file = base64toFile(compressImage, name);
      size.innerHTML = size.innerHTML + file.size
      document.body.appendChild(imgEl)
    }
    // base64转换为file
    function base64toFile(base64Data, fileName) {//将base64转换为文件
      var arr = base64Data.split(',') //分割为数组，分割到第一个逗号
      let mime = arr[0].match(/:(.*?);/)[1]//获取分割后的base64前缀中的类型
      let bstr = window.atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], fileName, { type: mime });
      // return new Blob([u8arr], { type: mime });
    }
  </script>
</body>

</html>