使用Canvas的drawImage方法可以实现图片的压缩。下面是一个简单的示例代码：

// 获取原始的图片对象var img = new Image();img.src = '原始图片路径';// 创建一个Canvas元素var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 设置Canvas的大小为压缩后的尺寸var maxWidth = 200;var maxHeight = 200;var ratio = 1;if (img.width > maxWidth || img.height > maxHeight) {ratio = Math.min(maxWidth / img.width, maxHeight / img.height);}canvas.width = img.width * ratio;canvas.height = img.height * ratio;// 在Canvas上绘制压缩后的图片ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);// 将Canvas转换为压缩后的图片数据var compressedImage = canvas.toDataURL('image/jpeg', 0.7);// 将压缩后的图片显示在页面上var compressedImgElement = document.createElement('img');compressedImgElement.src = compressedImage;document.body.appendChild(compressedImgElement);

在上面的代码中，首先创建一个原始的图片对象，然后创建一个Canvas元素，并设置Canvas的大小为压缩后的尺寸。接着使用drawImage方法在Canvas上绘制压缩后的图片，最后将Canvas转换为压缩后的图片数据，并将其显示在页面上。