JS HTML图片压缩：从Canvas到文件

"这篇文章主要介绍了如何使用JavaScript和HTML结合Canvas实现图片显示和压缩的功能，适合初学者参考学习。" 在JavaScript和HTML开发中，有时我们需要处理用户上传的图片，并可能需要在上传之前对其进行压缩，以减少文件大小和提高上传效率。这篇教程分享了一个新手的学习过程，展示了如何使用Canvas元素来实现这个功能。 首先，我们要让用户能够选择图片并将其显示在页面上。这可以通过HTML的`<input type="file">`元素来实现，当用户选择图片后，会触发`onchange`事件。在JavaScript中，我们可以监听这个事件，读取选中的图片文件，并将其显示出来： ```html <input id="imginput" type="file" accept="image/*" onchange="showImg(this)"> ``` 在对应的JavaScript代码中，`showImg`函数用于处理图片的显示： ```javascript function showImg(obj) { var files = obj.files; var img = new Image(); img.width = 100; if (window.URL) { img.src = window.URL.createObjectURL(files[0]); // 支持现代浏览器 } else { // Opera等不支持createObjectURL/revokeObjectURL的浏览器，使用FileReader var reader = new FileReader(); reader.readAsDataURL(files[0]); reader.onload = function(e) { img.src = this.result; img.width = 200; // 可能需要设置宽高 img.id = "img01"; divimg1.appendChild(img); } } img.id = "img01"; divimg1.appendChild(img); } ``` 接下来，是使用Canvas进行图片压缩的关键步骤。Canvas提供了一种方式来绘制图像，然后我们可以提取其数据，进行压缩。以下是一个简单的Canvas示例： ```html <canvas class="convas01"></canvas> ``` 在JavaScript中，我们需要获取到Canvas元素，然后使用`drawImage`方法将图片绘制到Canvas上，再通过`toDataURL`方法获取压缩后的Base64编码的图片数据： ```javascript function compressImage(img, maxWidth, maxHeight, quality) { var canvas = document.querySelector('.convas01'); var ctx = canvas.getContext('2d'); // 计算等比例缩放的宽高 var scale = Math.min(maxWidth / img.width, maxHeight / img.height); canvas.width = img.width * scale; canvas.height = img.height * scale; // 绘制图片到Canvas ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 获取压缩后的Base64编码图片数据 var compressedDataUrl = canvas.toDataURL('image/jpeg', quality || 0.7); return compressedDataUrl; } // 假设已有显示的图片（img01），调用压缩函数 var img = document.getElementById('img01'); var compressedUrl = compressImage(img, 800, 600); // 设置最大宽度和高度 ``` 以上代码将图片绘制到Canvas上，然后根据指定的最大宽度和高度进行等比例缩放，以保持图片的比例。`toDataURL`方法的第二个参数可以设置图片的质量，数值越小，质量越低，压缩效果越明显。 最后，你可以将`compressedUrl`这个Base64编码的字符串发送到服务器，或者替换原来的图片源，显示压缩后的图片。 这个教程覆盖了图片显示和使用Canvas进行图片压缩的基础知识，对于想要在前端实现图片压缩功能的开发者来说，是一个很好的起点。需要注意的是，不同浏览器对Canvas和FileReader的支持情况可能有所不同，实际应用时需要考虑兼容性问题。