Canvas drawImage方法实现图片压缩详解

Canvas的drawImage方法可以用来实现图片的压缩，下面将详细讲解该方法的使用过程。

drawImage方法简介

Canvas的drawImage方法可以将一个已有的图像绘制到Canvas上。该方法有3种用法：

1. drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
2. drawImage(image, dx, dy)
3. drawImage(image, dx, dy, dWidth, dHeight)

其中，第1种用法可以对图像进行裁剪和缩放，第2和第3种用法则可以对图像进行位置的调整和缩放。

图片压缩示例1

下面是一个简单的图片压缩示例，该示例将一个指定的图片压缩为指定大小。

const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function () {
    let imgWidth = this.width;
    let imgHeight = this.height;
    let ratio = 1;
    let maxWidth = 500;
    let maxHeight = 500;
    if (imgWidth > maxWidth || imgHeight > maxHeight) {
        if (imgWidth > imgHeight) {
            ratio = maxWidth / imgWidth;
        } else {
            ratio = maxHeight / imgHeight;
        }
    }
    canvas.width = imgWidth * ratio;
    canvas.height = imgHeight * ratio;
    ctx.drawImage(img, 0, 0, imgWidth, imgHeight, 0, 0, imgWidth * ratio, imgHeight * ratio);
    let dataUrl = canvas.toDataURL('image/jpeg', 0.7);
    console.log(dataUrl);
};
img.src = 'test.jpg';

该示例中，首先创建一个Canvas对象，然后获取它的绘图上下文。接着创建一个Image对象，并指定其加载完成后执行的回调函数。在回调函数中，先获取图片的原始宽高，然后根据图片的尺寸和最大尺寸计算出缩放比例，并设置Canvas的宽高为缩放后的尺寸。最后使用drawImage方法将原始图片绘制到Canvas中，并将绘制后的图像导出为base64格式的数据URL。

图片压缩示例2

下面是另一个示例，该示例将一个指定的图片压缩为固定尺寸。

const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
    let width = 300;
    let height = 300;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);
    let dataUrl = canvas.toDataURL('image/jpeg', 0.7);
    console.log(dataUrl);
};
img.src = 'test.jpg';

该示例中，首先创建一个Canvas对象，然后获取它的绘图上下文。接着创建一个Image对象，并指定其加载完成后执行的回调函数。在回调函数中，设置希望输出的图片宽高，并将Canvas的宽高设置为指定的宽高。最后使用drawImage方法将原始图片绘制到Canvas中，并将绘制后的图像导出为base64格式的数据URL。

以上就是Canvas drawImage方法实现图片压缩的详细攻略，希望能够对你有所帮助。