layui图片上传前使用canvas压缩

在使用Layui进行图片上传前使用Canvas进行压缩的步骤如下：

获取用户选择的图片文件。

var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];

创建一个<canvas>元素，并获取其2D上下文。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

创建一个<img>元素，并将用户选择的图片文件加载到该元素上。

var img = new Image();
img.onload = function() {
    // 图片加载完成后进行压缩操作
};
img.src = URL.createObjectURL(file);

在图片加载完成后，将图片绘制到<canvas>上，并设置压缩后的宽高。

img.onload = function() {
    var MAX_WIDTH = 800; // 设置最大宽度
    var MAX_HEIGHT = 600; // 设置最大高度

    var width = img.width;
    var height = img.height;

    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }

    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(img, 0, 0, width, height);
};

将压缩后的图片转换为base64编码。

var compressedDataUrl = canvas.toDataURL("image/jpeg", 0.7); // 设置图片质量，0.7表示70%的质量

将base64编码的图片数据传递给Layui的图片上传方法。

// 使用Layui进行图片上传
layui.upload({
    url: "your_upload_url",
    data: { image: compressedDataUrl },
    success: function(res) {
        // 上传成功的处理
    },
    error: function() {
        // 上传失败的处理
    }
});

以上是使用Canvas进行图片压缩的基本步骤，其中可以根据实际需求进行调整和优化