使用js在layui中实现上传图片压缩

前言

在开发 web 应用程序中，图片上传是一个常见的需求。为了提高网页加载速度和节省带宽，通常需要对上传的图片进行压缩。本文将介绍如何使用 JavaScript 在 layui 框架中实现图片压缩和上传。

代码实现

首先，在 HTML 文件中引入 layui 相关的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.7/dist/css/layui.css" />
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.7/dist/layui.all.js"></script>

接下来，我们需要在页面中添加一个文件上传的 input 组件和一个用于显示压缩后图片的 img 元素：

<input type="file" id="upload" accept="image/*" />
<img id="compressedImage" style="max-width: 100%;" />

然后，使用以下 JavaScript 代码实现图片压缩和上传：

layui.use('upload', function() {
  var upload = layui.upload;
  
  // 创建文件上传实例
  var uploadInst = upload.render({
    elem: '#upload',
    size: 1024,
    acceptMime: 'image/*',
    choose: function(obj) {
      obj.preview(function(index, file, result) {
        var img = new Image();
        img.onload = function() {
          var canvas = document.createElement('canvas');
          var context = canvas.getContext('2d');
          var maxWidth = 800;
          var maxHeight = 800;
          var ratio = 1;
          if (img.width > maxWidth) {
            ratio = maxWidth / img.width;
          } else if (img.height > maxHeight) {
            ratio = maxHeight / img.height;
          }
          canvas.width = img.width * ratio;
          canvas.height = img.height * ratio;
          context.drawImage(img, 0, 0, canvas.width, canvas.height);
          var compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8);
          document.getElementById('compressedImage').src = compressedDataUrl;
          
          // 此处可添加上传逻辑，将 compressedDataUrl 发送到服务器
        };
        img.src = result;
      });
    }
  });
});

代码解释

以上代码通过 layui 的文件上传组件实现图片的选择和预览功能，选择图片后将使用 JavaScript 对选择的图片进行压缩，并将压缩后的图片显示在页面上。

代码解释如下：

1. 首先使用 layui 的 upload 模块，并创建文件上传实例。

2. 在选择文件后的回调函数中，使用 FileReader 读取图片并使用 Image 对象进行预览。

3. 在 Image 对象的 onload 事件中，创建一个新的 canvas 元素和上下文对象，并根据设定的最大宽高和图片实际宽高计算压缩比率。

4. 使用上下文对象的 drawImage 方法将图片按照压缩比率绘制到 canvas 上，得到压缩后的图片。

5. 使用 canvas 的 toDataURL 方法将压缩后的图片转换为 data URL，并将其设置为 img 元素的 src 属性值，实现图片预览效果。

6. 最后，可以在图片上传逻辑的位置添加代码，将压缩后的图片数据发送到服务器进行保存。

总结

通过上述代码实现，在 layui 框架中可以方便地实现图片上传和压缩功能。用户选择图片后，使用 JavaScript 对图片进行压缩，减小图片文件大小，提高页面加载速度和节省带宽。同时，利用 layui 的文件上传组件，方便地实现了图片的选择和预览功能。