完整 的 压缩代码
<!DOCTYPE html><html><head><title>图片压缩</title><script src="/ajax/libs/javascript-canvas-to-blob/3.17.0/js/canvas-to-blob.min.js"></script><script>function compressImage() {// 获取用户选择的图片文件var fileInput = document.getElementById("imageInput");var file = fileInput.files[0];// 创建一个新的图片元素var img = new Image();// 使用FileReader对象读取文件内容var reader = new FileReader();reader.onload = function(e) {img.src = e.target.result;// 在图片加载完成后进行压缩img.onload = function() {var canvas = document.createElement("canvas");// 设置压缩后的图片宽高var maxWidth = 800;var maxHeight = 800;// 根据原始图片大小和目标宽高计算压缩比例var width = img.width;var height = img.height;if (width > height) {if (width > maxWidth) {height *= maxWidth / width;width = maxWidth;}} else {if (height > maxHeight) {width *= maxHeight / height;height = maxHeight;}}// 设置canvas宽高,并将原始图片绘制到canvas上canvas.width = width;canvas.height = height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);// 将canvas上的图像转换为Blob对象canvas.toBlob(function(blob) {// 创建一个下载链接并设置相关属性var link = document.createElement("a");link.href = window.URL.createObjectURL(blob);link.download = "compressed_image.jpg";// 模拟点击下载链接,实现图片下载link.click();// 清理创建的下载链接window.URL.revokeObjectURL(link.href);}, "image/jpeg", 0.3); // 第三个参数表示压缩质量(0.8 表示 80% 质量)};};reader.readAsDataURL(file);}</script></head><body><input type="file" id="imageInput" accept="image/*"><button onclick="compressImage()">压缩图片</button></body></html>
这段代码创建了一个简单的网页,包含一个用于选择图片文件的输入框和一个用于触发压缩的按钮。当用户选择图片文件后,点击按钮将会对图片进行压缩。
在JavaScript代码中,首先获取用户选择的图片文件,并使用FileReader读取其内容。然后,创建一个新的图片元素,并将读取到的文件内容作为其源。待图片加载完成后,创建一个新的canvas元素,并通过绘制原始图片到canvas上来实现压缩。最后,使用canvas.toBlob()方法将压缩后的图像转换为Blob对象,并利用创建的下载链接进行图片下载。
需要注意的是,为了使用canvas.toBlob()方法,在本示例中引入了canvas-to-blob.min.js库。此外,为了实现压缩效果,你可以根据需要调整 maxWidth、maxHeight 和质量参数(0.8)的值。