超好用的原生 JS + Canvas 进行图片压缩

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

淘淘是只狗

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

阅读量149

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_43477721/article/details/112140186

版权

JavaScript 专栏收录该内容

43 篇文章 4 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <input type="file" id="upload">
  <p id="p"></p>
  <script>
    const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg', 'image/webp']; // 限定图片文件类型
    const MAXSIZE = 1024 * 1024 * 3; // 限定图片最大容量
    const MAXSIZE_STR = '3MB';
    function convertImageToBase64(file, cb) {
      let reader = new FileReader();
      reader.addEventListener('load', function (e) {
        const base64Image = e.target.result; // 获取文件内容，等同于 reader.result
        cb(base64Image);
        reader = null;
      });
      reader.readAsDataURL(file); // 读取 file 对象中的内容
    }
    function compress(base64Image, cb) {
      let maxW = 1024;
      let maxH = 1024;

      const image = new Image();
      image.addEventListener('load', function () {
        let ratio; // 压缩比
        let needCompress = false; // 是否需要压缩
        if (maxW < image.naturalWidth) {
          needCompress = true;
          ratio = image.naturalWidth / maxW;
          maxH = image.naturalHeight / ratio;
        }
        if (maxH < image.naturalHeight) {
          needCompress = true;
          ratio = image.naturalHeight / maxH;
          maxW = image.naturalWidth / ratio;
        }
        if (!needCompress) {
          maxW = image.naturalWidth;
          maxH = image.naturalHeight;
        }
        const canvas = document.createElement('canvas');
        canvas.setAttribute('id', '__compress__');
        canvas.width = maxW;
        canvas.height = maxH;
        canvas.style.visibility = 'hidden';
        document.body.append(canvas);

        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, maxW, maxH);
        ctx.drawImage(image, 0, 0, maxW, maxH); // 渲染图片
        const compressImage = canvas.toDataURL('image/jpeg', 0.9); // 压缩图片
        cb(compressImage);
        const _image = new Image();
        _image.src = compressImage;
        document.body.appendChild(_image);
        canvas.remove(); // 移除 canvas
        document.getElementById('p').innerHTML = `压缩比 ${image.src.length / _image.src.length}`
      });
      image.src = base64Image; // 将图片设置到 image 的 src 属性中
      document.body.appendChild(image);
    }
    function uploadImage(compressImage) {
      console.log('upload image to server...', compressImage);
    }

    const upload = document.getElementById('upload');
    upload.addEventListener('change', function (e) {
      const file = e.target.files[0];
      console.log(file);
      if (!file) {
        return;
      }
      const { type: fileType, size: fileSize } = file;
      // 图片类型检查
      if (!ACCEPT.includes(fileType)) {
        alert('不支持上传该格式文件！');
        upload.value = '';
        return;
      }
      // 图片大小检查
      if (fileSize > MAXSIZE) {
        alert('文件超出' + MAXSIZE_STR + '！');
        upload.value = '';
        return;
      }
      // 压缩文件
      convertImageToBase64(file, (base64Image) => compress(base64Image, uploadImage));
    });
  </script>
</body>

</html>

在这里插入图片描述

淘淘是只狗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超好用的原生 JS + Canvas 进行图片压缩

<!DOCTYPE html><html><head></head><body> <input type="file" id="upload"> <p id="p"></p> <script> const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg', 'image/webp']; // 限定图片文件类型 c.
复制链接

扫一扫

专栏目录