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

完整 的 压缩代码

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)的值。

你可能感兴趣的:(前端htmlcss,javascript,前端,html)