图片压缩上传实例

前台图片上传压缩是一种常见的需求，可以通过前端技术实现图片的压缩，减小图片的大小，提高页面加载速度。以下是一个前台图片上传压缩的实例：

1. 首先，在前端页面中添加一个文件上传的input标签：

<input type="file" id="uploadInput">

1. 使用JavaScript监听文件上传事件，并获取上传的图片文件：

var uploadInput = document.getElementById('uploadInput'); uploadInput.addEventListener('change', function() { var file = uploadInput.files[0]; // 处理上传的图片文件 });

1. 使用HTML5的Canvas元素进行图片压缩：

var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = URL.createObjectURL(file); img.onload = function() { // 设置canvas的宽高 var maxWidth = 800; var maxHeight = 600; 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.width = width; canvas.height = height; // 绘制压缩后的图片到canvas ctx.drawImage(img, 0, 0, width, height); // 将canvas转换为DataURL格式的图片数据 var compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 处理压缩后的图片数据 };

1. 最后，可以将压缩后的图片数据发送到服务器进行保存或其他操作。

这是一个简单的前台图片上传压缩实例，通过使用Canvas元素对图片进行压缩，可以减小图片的大小，提高页面加载速度。