使用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轉換為壓縮后的圖片數據，并將其顯示在頁面上。