前端压缩图片的实现方法

前端压缩图片是指在客户端（浏览器）上对图片进行压缩，目的是为了减少图片的体积，提高图片的加载速度。常见的有：

• Canvas压缩

  Canvas压缩是使用HTML5的Canvas API来实现的，在Canvas上绘制图片，将Canvas的内容转换为base64编码，将base64编码转换为图片，从而实现压缩图片的效果。

      // 将图片转换为base64编码
      function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
      }
      

• FileReader压缩

  FileReader压缩是使用FileReader API来实现的，通过读取文件，将图片转换为base64编码，将base64编码转换为图片，从而实现压缩图片的效果。

      // 将图片转换为base64编码
      function getBase64Image(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          var dataURL = e.target.result;
          return dataURL;
        };
      }
      

• 压缩工具压缩

  压缩工具压缩是使用第三方压缩工具来实现的，常见的压缩工具有tinypng、tinyjpg等，可以将图片上传到压缩工具，将压缩后的图片下载到本地，从而实现压缩图片的效果。