利用canvas压缩图片并预览

最新推荐文章于 2024-05-16 11:12:50 发布

小也同学

最新推荐文章于 2024-05-16 11:12:50 发布

阅读量163

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/qq_37734787/article/details/105581721

版权

前端技术专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!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>
  <label>请选择一个文件：</label>
  <input type="file" class="files" onchange="myfile(this)" />
  <canvas width="300" height="200"></canvas>
  <script>
    // 定义一个压缩文件的函数
    function compressImage(url) {
      // 获取canvas
      var cvs = document.querySelector('canvas');
      // 获取画图工具箱
      var ctx = cvs.getContext('2d');
      // 创建图片对象相当于img元素
      var img = new window.Image();
      // 给图片加路径
      img.src = url;
      img.onload = function () {
        var _this = this;
        // cvs.width和cvs.height是canvas的宽和高的值直接获取
        ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
        // 选择压缩后的图片类型和质量
        // _this.newImageData = cvs.toDataURL('image/jpeg', 1.0);
        _this.newImageData = cvs.toDataURL('image/webp', 1.0);
        console.log(_this.newImageData);
      }
    }
    function myfile(_this) {
      // console.log(__this);
      // 获取文件的详细信息
      var file = _this.files[0];
      // 类型匹配是图片类型才调用函数压缩
      if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png') {
        console.log(URL);
        // 将图片信息转换为blob类型
        var blobUrl = URL.createObjectURL(file);
        // console.log(U);。调用压缩函数
        compressImage(blobUrl);
      } else {
        alert("图片类型不对")
        return;
      }
    }

  </script>
</body>

</html>