如何实现图片压缩

发布时间：2024年01月15日

文章目录

1、canvas实现图片压缩

canvas 实现图片压缩，主要是使用 canvas 的drawImage 方法

具体思路

  1. 拿到用户上传的文件
  2. 转成base64
  3. 创建一个 Image，主要是获取到这个图片的宽度和高度
  4. 创建一个 2D 的画布，画布的宽高就是 图片的宽高
  5. drawImage 渲染图片
  6. toDataURL 生成 base64 地址（这个方法第二个参数，可以设置输出质量）

本来图片是 1.4MB, 输出质量是 0.5，转化后的大小是 523KB

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" name="" id="file">
  <script>
    const fileEl = document.getElementById('file');
    fileEl.onchange = function (e) {
      const file = e.target.files[0];
      const reader = new FileReader()
      reader.onload = async function (e) {
        console.log('原始图片大小', e.target.result);
        console.log('压缩后的大小', await compressImg(e.target.result));
      }
      reader.readAsDataURL(file)


      function compressImg(base64Data, compressRatio = 0.5) {
        // 目的是为了拿到 图片的宽高，方便渲染canvas的时候定义画布大小
        return new Promise((resolve, reject) => {
          const img = new Image()
          img.src = base64Data
          document.body.append(img)
          img.onload = function () {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = img.width
            canvas.height = img.height
            ctx.drawImage(img, 0, 0) // 图片，裁剪的x，裁剪的y，宽，高
            const dataURL = canvas.toDataURL('image/jpeg', compressRatio) // 第一个参数:文件类型，第二个参数：输出图片的质量 0-1
            // console.log(dataURL, 'dataURL');
            resolve(dataURL)
          }
        })
      }
    }
  </script>
</body>

</html>

2、其他

  • 图片裁剪，可以使用 Sharp（https://sharp.pixelplumbing.com/）、Jimp（http://jimp.readthedocs.io/en/latest/）
  • 图片压缩，可以使用 Compressor.js

一般是 可以使用 shape 进行裁剪

文章来源:https://blog.csdn.net/qq_45634593/article/details/135611284
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章