要进行Canvas图片压缩，您可以使用HTML5 Canvas API和JavaScript。以下是一个示例代码，展示如何将图片加载到Canvas中并进行压缩：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Image Compression</title>
</head>
<body>
<input type="file" id="upload" accept="image/*">
<canvas id="canvas" style="display: none;"></canvas>
<img id="output" alt="Compressed Image">
<script>
document.getElementById('upload').addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// 压缩图片，设置图片质量
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.5); // 0.5表示50%质量
document.getElementById('output').src = compressedDataUrl;
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>这个代码包含以下步骤：
- 文件上传：用户通过文件输入框选择图片。
- 读取文件：使用FileReader API读取图片文件。
- 绘制到Canvas：将图片绘制到Canvas元素上。
- 图片压缩：使用Canvas的
toDataURL方法将图片转换为压缩后的Base64编码字符串，这里指定压缩格式为JPEG，并设置压缩质量为50%。 - 展示压缩后的图片：将压缩后的图片展示在页面上。
您可以根据需要调整压缩质量（0.0到1.0之间的浮点数）和图片格式（如’image/png‘或’image/webp‘）。这段代码是一个基本的示例，可以根据具体需求进行修改和扩展。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/190497.html
