完整 的 压缩代码
<!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）的值。
