图片压缩 --可以压缩证件照的那种呦

最新推荐文章于 2024-07-23 12:35:43 发布

小墨蛇

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量392

点赞数

分类专栏：前端htmlcss 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weiyi47/article/details/131316054

版权

前端htmlcss 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

完整的压缩代码

<!DOCTYPE html>
<html>
<head>
    <title>图片压缩</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.17.0/js/canvas-to-blob.min.js"></script>
    <script>
        function compressImage() {
            // 获取用户选择的图片文件
            var fileInput = document.getElementById("imageInput");
            var file = fileInput.files[0];

            // 创建一个新的图片元素
            var img = new Image();

            // 使用FileReader对象读取文件内容
            var reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;

                // 在图片加载完成后进行压缩
                img.onload = function() {
                    var canvas = document.createElement("canvas");

                    // 设置压缩后的图片宽高
                    var maxWidth = 800;
                    var maxHeight = 800;

                    // 根据原始图片大小和目标宽高计算压缩比例
                    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宽高，并将原始图片绘制到canvas上
                    canvas.width = width;
                    canvas.height = height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, width, height);

                    // 将canvas上的图像转换为Blob对象
                    canvas.toBlob(function(blob) {
                        // 创建一个下载链接并设置相关属性
                        var link = document.createElement("a");
                        link.href = window.URL.createObjectURL(blob);
                        link.download = "compressed_image.jpg";

                        // 模拟点击下载链接，实现图片下载
                        link.click();

                        // 清理创建的下载链接
                        window.URL.revokeObjectURL(link.href);
                    }, "image/jpeg", 0.3); // 第三个参数表示压缩质量（0.8 表示 80% 质量）
                };
            };
            reader.readAsDataURL(file);
        }
    </script>
</head>
<body>
    <input type="file" id="imageInput" accept="image/*">
    <button onclick="compressImage()">压缩图片</button>
</body>
</html>

这段代码创建了一个简单的网页，包含一个用于选择图片文件的输入框和一个用于触发压缩的按钮。当用户选择图片文件后，点击按钮将会对图片进行压缩。

在JavaScript代码中，首先获取用户选择的图片文件，并使用FileReader读取其内容。然后，创建一个新的图片元素，并将读取到的文件内容作为其源。待图片加载完成后，创建一个新的canvas元素，并通过绘制原始图片到canvas上来实现压缩。最后，使用canvas.toBlob()方法将压缩后的图像转换为Blob对象，并利用创建的下载链接进行图片下载。

需要注意的是，为了使用canvas.toBlob()方法，在本示例中引入了canvas-to-blob.min.js库。此外，为了实现压缩效果，你可以根据需要调整 maxWidth、maxHeight 和质量参数（0.8）的值。

小墨蛇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片压缩 --可以压缩证件照的那种呦

然后，创建一个新的图片元素，并将读取到的文件内容作为其源。待图片加载完成后，创建一个新的canvas元素，并通过绘制原始图片到canvas上来实现压缩。最后，使用canvas.toBlob()方法将压缩后的图像转换为Blob对象，并利用创建的下载链接进行图片下载。这段代码创建了一个简单的网页，包含一个用于选择图片文件的输入框和一个用于触发压缩的按钮。// 设置canvas宽高，并将原始图片绘制到canvas上。// 获取用户选择的图片文件。// 创建一个新的图片元素。// 设置压缩后的图片宽高。
复制链接

扫一扫

专栏目录