下面是一个使用HTML5 Canvas实现的图片压缩的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>图片压缩</title>
</head>
<body>
<input type="file" onchange="compressImage(event)">
<img id="preview">
<script>
function compressImage(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
var compressedImage = canvas.toDataURL('image/jpeg', 0.7); // 0.7为压缩比例
document.getElementById('preview').src = compressedImage;
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>
上述代码实现了以下功能：
- 通过
<input type="file">元素获取用户选择的图片文件。 - 使用
FileReader对象将图片文件转换为DataURL。 - 创建一个
<img>元素并将DataURL赋值给它，以显示预览图。 - 创建一个
<canvas>元素并将原始图片绘制到它上面，将其压缩并将压缩后的图片转换为DataURL。
在上述代码中，toDataURL()方法的第一个参数为图片格式（例如JPEG、PNG），第二个参数为压缩比例（从0到1之间的值）。调整压缩比例可以控制压缩质量和文件大小之间的平衡。
4985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
