华为云国际站代理商：Canvas图片压缩

luotuoemo • 2024年7月15日 10:14 • 华为云 • 阅读 36

要进行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>

这个代码包含以下步骤：