图片的压缩---使用canvas进行压缩2

最新推荐文章于 2024-07-08 15:10:13 发布

wenmin1987

最新推荐文章于 2024-07-08 15:10:13 发布

阅读量809

点赞数 1

分类专栏：性能优化与兼容文章标签： canvast压缩图片

本文链接：https://blog.csdn.net/wenmin1987/article/details/107005341

版权

性能优化与兼容专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<input type="file" name="" id="filedemo">

思路

将文件类型的（file）图片转成base64的编码方式

创建Image去接受图片文件的信息

创建等比例大小的canvas

将图片绘制到canvas

对canvas进行压缩，获取新的信息

将新的信息转换为图片文件

链接：https://www.jianshu.com/p/177f7327423e

// canvas压缩会失真，  但有个问题就是图片过小，‘压缩’后会更大，这个区间大概是1.5M以内，所以超过1.5M才进行此canvas压缩

let filetab = document.getElementById('filedemo')

filetab.onchange = function (e) {

      let file = e.target.files[0] // 获取到的图片信息

      let file_type = file.type   // 图片的类型

      let file_name = file.name   // 图片的名字

      let file_size = file.size   // 图片的大小

      console.log(`压缩前文件大小${file_size}`)

      comImg(file, 0.1, filename = `new_${file.name}`)

  }

     /**

     * @param {file} 需要压缩的图片文件

     * @return 图片的Base64

     */

     function ImageToBase64(file) {

      return new Promise(resolve => {

        if (!file) resolve(null) // 没有文件时直接返回

        let fileReader = new FileReader()

        fileReader.readAsDataURL(file)

        fileReader.onload = function (e) {

          // e 是 onLoad之后返回的参数信息，其中就有我们需要的Base64的信息

          let imgBase64Info = e.target.result

          resolve(imgBase64Info) // 返回获取到的Base64信息

        }

      })

    }

        /**

     * @param {base64} 获取BASE64的返回值

     * @return 新的Base64

     */

     function comperImage(base64, filetype, quality) {

      return new Promise(resolve => {

        if (!base64) resolve() // 没有给信息直接返回

        let image = new Image()

        image.src = base64

        image.onload = function (e) {

          let info = e.path[0]

          let sacle = info.width / info.height // 获取宽高比例

          console.log(sacle)

          let canvas = document.createElement('canvas') // 创建画布

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

          canvas.width = info.width // 设置画布宽高

          canvas.height = info.height

          ctx.drawImage(image, 0, 0, canvas.width, canvas.height) // 将图片绘制在画板上

          let newBase64 = canvas.toDataURL(filetype, quality) // 将画板内容转为图片并设置压缩比例

          resolve(newBase64)

        }

      })

    }

        /*/**

     *  Base64转换为File

     * @param { string } 文件的url，此处为生成的新的Base64

     * @param { string } 要生成的文件名字

     * @return  File

     */

     function dataURLtoFile(dataurl, filename) {

      return new Promise(resolve => {

        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

        while (n--) {

          u8arr[n] = bstr.charCodeAt(n);

        }

        resolve(new File([u8arr], filename, { type: mime }))

      })

    }

    /**

     *  压缩图片

     * @param { file } 需要压缩的文件

     * @return

     */

     async function comImg(file, quality, filename = `new_${file.name}`) {

      // 将png格式文件转为JPEG输出，因为Png图片不能用这种方式进行压缩

      let filetype = file.type === 'image/png' ? 'image/jpeg' : file.type

      let base64 = await ImageToBase64(file) // 获取需要压缩图片的base64

      let newBase64 = await comperImage(base64, filetype, quality) // 获取压缩后的base64

      let newFile = await dataURLtoFile(newBase64, filename) // 生成新文件

      console.log(`压缩后文件大小${newFile.size}`)

       //这里可以写一个上传的方法

       // uploadeNewfile(newFile)

       //在页面上显示

      let resultImg = new Image()  // 创建Image标签

      resultImg.src = URL.createObjectURL(newFile) // 创建img的src

      document.body.appendChild(resultImg) //添加至页面

    }