美文网首页
canvas实现图片压缩

canvas实现图片压缩

作者: 小恐龙yaya | 来源:发表于2020-04-22 18:17 被阅读0次
    • 为什么要实现图片压缩?

    在当前各大手机厂商比赛摄像头大战的时候,带来的就是一张随随便便的照片就能达到10M-100M不等,那么就带了上传图片等待时间长,加载时间长,造成不必要的浪费,为了解决这问题就必须对图片进行压缩后再进行上传。

    • 如何实现图片压缩?

    1 用到的相关API

    • canvas 对图片进行重绘

    canvas 是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

    对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据

    2 思路分析

    • 将文件类型的(file)图片转成base64的编码方式

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

    • 创建等比例大小的canvas

    • 将图片绘制到canvas

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

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

    • 逐步实现

    既然有了思路,那么开始实践吧!

    • 先写一个选择图片的标签和方法

    HTML

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

    JS

     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   // 图片的大小
      }
    

    获取到的信息包含大小,类型....

    文件的size是按照字节,1字节就是1byte就是1B,1KB = 1024B,1MB = 1024 * 1024B

    • 将获取的图片转为base64,返回一个空或者转换后的Base64
        /**
         * > 小恐龙
         * @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信息
            }
          })
        }
    
    • 通过拿到的Base64的信息,我们通过创建canvas画布,进行画图,设置压缩级别后转出为Base64,之后返回新的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 // 获取宽高比例
              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转为新的文件并且返回
        /*/**
         *  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}`) 
          let resultImg = new Image()  // 创建Image标签
          resultImg.src = URL.createObjectURL(newFile) // 创建img的src
          document.body.appendChild(resultImg) //添加至页面
        }
    

    看下效果


    image.png

    可以看到,压缩的效果还是非常明显的,至此,一个图片的压缩就完成了。
    感觉还不错的观众姥爷别忘记,点赞收藏 。

    相关文章

      网友评论

          本文标题:canvas实现图片压缩

          本文链接:https://www.haomeiwen.com/subject/lkubihtx.html