首页帮我写一段简单的图片上传压缩的html代码

帮我写一段简单的图片上传压缩的html代码

时间: 2023-08-04 17:05:31 浏览: 111

当然可以，下面是一个简单的图片上传压缩的 HTML 代码示例： ```html <!DOCTYPE html> <html> <head> <title>图片上传和压缩</title> </head> <body> <h1>图片上传和压缩</h1> <form> <input type="file" id="imageFile" accept="image/*"> <br> <button type="button" onclick="compressImage()">压缩图片</button> </form> <br> <img id="previewImage" src="" alt="预览图" style="max-width: 500px;"> <script> function compressImage() { var imageFile = document.getElementById("imageFile").files[0]; var reader = new FileReader(); reader.onload = function (event) { var image = new Image(); image.src = event.target.result; image.onload = function () { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var width = image.width; var height = image.height; if (width > height) { if (width > 500) { height *= 500 / width; width = 500; } } else { if (height > 500) { width *= 500 / height; height = 500; } } canvas.width = width; canvas.height = height; context.drawImage(image, 0, 0, width, height); var compressedImage = canvas.toDataURL("image/jpeg"); document.getElementById("previewImage").src = compressedImage; }; }; reader.readAsDataURL(imageFile); } </script> </body> </html> ``` 这段代码包含一个表单元素和一个 JavaScript 函数。用户可以通过表单元素选择一个图片文件，然后点击“压缩图片”按钮触发 JavaScript 函数。该函数将图片文件读入内存，然后使用 HTML5 Canvas 对象将图片压缩到最大宽度或高度为 500 像素的尺寸，并将压缩后的图片显示在页面上。注意，这里使用了 `toDataURL()` 方法将压缩后的图片转化为 Base64 编码的字符串，以便在页面上显示预览图。

阅读全文