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