使用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转换为压缩后的图片数据，并将其显示在页面上。
