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。