怎么使用js对图片进行压缩

使用JavaScript对图片进行压缩可以使用HTML5的canvas元素，具体步骤如下：

1. 创建一个Image对象，将图片加载进来：

var img = new Image();
img.src = 'image.jpg';

2. 等待图片加载完成后，将图片绘制到canvas上：

img.onload = function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);

    // 压缩图片
    var compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); // 压缩质量为0.7
};

在这里，首先创建一个canvas元素，将其宽高设置为图片的宽高，然后将图片绘制到canvas上。接着调用canvas的toDataURL()方法将图片转换成压缩后的base64编码的数据URL。

toDataURL()方法接受两个参数，第一个参数是指定返回的数据类型，这里我们指定为'image/jpeg'表示返回jpeg格式的图片数据。第二个参数是指定压缩质量，范围是0到1，数值越小表示压缩质量越低，文件体积越小。

最后得到的压缩后的图片数据可以用于上传或保存。需要注意的是，由于压缩后的图片是base64编码的数据，所以文件体积会比原图大，但是总体上还是可以通过压缩减小图片的文件体积。