首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

图片等比压缩js代码

图片等比压缩是一种常见的需求,特别是在网页加载优化和存储空间节省方面。以下是一个使用JavaScript实现图片等比压缩的示例代码,并解释相关概念、优势、类型、应用场景以及可能遇到的问题和解决方法。

基础概念

等比压缩:保持图片的原始宽高比不变,通过调整图片的尺寸来减小文件大小。

优势

  1. 减少文件大小:加快网页加载速度。
  2. 节省存储空间:降低服务器存储成本。
  3. 保持视觉效果:避免图片变形。

类型

  • 前端压缩:在客户端浏览器中进行压缩。
  • 后端压缩:在服务器端进行压缩。

应用场景

  • 网页图片优化:提升用户体验。
  • 移动应用:节省流量和提高加载速度。
  • 存储管理:减少存储空间的占用。

示例代码

以下是一个使用JavaScript和HTML5 Canvas进行图片等比压缩的示例:

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Compression</title>
</head>
<body>
    <input type="file" id="fileInput" accept="image/*">
    <img id="preview" alt="Preview">
    <script>
        document.getElementById('fileInput').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 maxWidth = 800; // 设置最大宽度
                        const maxHeight = 600; // 设置最大高度
                        let width = img.width;
                        let height = img.height;

                        if (width > height) {
                            if (width > maxWidth) {
                                height *= maxWidth / width;
                                width = maxWidth;
                            }
                        } else {
                            if (height > maxHeight) {
                                width *= maxHeight / height;
                                height = maxHeight;
                            }
                        }

                        const canvas = document.createElement('canvas');
                        canvas.width = width;
                        canvas.height = height;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0, width, height);

                        const compressedImage = canvas.toDataURL('image/jpeg', 0.8); // 压缩质量为80%
                        document.getElementById('preview').src = compressedImage;
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>

可能遇到的问题和解决方法

  1. 图片变形
    • 原因:未正确计算新的宽高比。
    • 解决方法:确保在调整尺寸时保持原始宽高比。
  • 压缩质量不佳
    • 原因:压缩质量参数设置过低。
    • 解决方法:调整canvas.toDataURL中的质量参数,通常在0到1之间。
  • 浏览器兼容性问题
    • 原因:某些浏览器不支持Canvas API。
    • 解决方法:检查浏览器兼容性,并提供降级方案或使用Polyfill。
  • 性能问题
    • 原因:处理大尺寸图片时消耗过多资源。
    • 解决方法:限制图片的最大尺寸,并在服务器端进行进一步处理。

通过以上代码和解释,你应该能够实现图片的等比压缩,并理解其背后的原理和应用场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS 图片压缩

前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...base64 格式 base64 编码的图片通过 Canvas 转换压缩,这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api,一个调节图片的分辨率的,一个是调节图片压缩质量并且输出的...缺点:只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果,其他图片格式,仅能通过调节尺寸来实现 代码实现 <div class="container"

25.8K21

Python等比例压缩与质量处理图片

项目上需要保存高清图片,不希望图片压缩太多,故分享一下Python下面的图片高质量保存,内容基于常用的PIL和opencv 一.Python PIL 1、在使用PIL image处理图像要获取高质量的关键地方是下面两点...: 1、处理时要用 ANTIALIAS; 2、保存时是要设置 quality; 2、核心代码: im.resize(box, Image.ANTIALIAS) im.save(path, 'JPEG',....jpeg或者.jpg的图片质量,其值为0---100(数值越大质量越高),默认95 2、cv2.CV_IMWRITE_WEBP_QUALITY 设置图片的格式为.webp格式的图片质量,值为0...--100 3、cv2.CV_IMWRITE_PNG_COMPRESSION 设置.png格式的压缩比,其值为0--9(数值越大,压缩比越大),默认为3 3、存盘标识示例: cv2.imwrite...('img.jpg',img,[int(cv2.IMWRITE_JPEG_QUALTY),70]) 把img变量保存到img.png,图片品质为70 4、不同类型图片说明: 保存png图像,图像后缀必须为

1.9K20
  • 详解 JS 压缩图片

    但只要有代码在引用对象 URL,内存就不会释放。要手工释放内存,可以把对象 URL 传给 window.revokeObjectURL()。...压缩输出图片寸尺固定为原始图片尺寸大小,而实际可能需要控制输出图片尺寸,同时达到尺寸也被压缩目的; 为了避免压缩图片变形,一般采用等比缩放,首先要计算出原始图片宽高比 aspectRatio, 用户设置的高乘以...aspectRatio,得出等比缩放后的宽,若比用户设置宽的小,则用户设置的高为为基准缩放,否则以宽为基准缩放。...=== 'image/png') { options.mimeType = 'image/jpeg'; } // 省略一些代码 // ... // 用户期待的输出宽高没有大于源图片的宽高情况下,输出文件大小大于源文件...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

    12.7K31

    两行代码实现图片压缩

    两行代码实现图片压缩 相信大家经常会碰到上传图片的情景,如果图片过大,上传又有限制。这个时候就需要对图片进行压缩处理,截图有可能模糊或者尺寸依然较大,在线网站压缩又可能有隐私顾虑。...作为一个伪技术人员,在多方尝试后发现,python只需两行代码即可完成图片压缩。...如果需要也可微信公众号关注HsuHeinrich,回复关键字【图片压缩】自动获取 import cv2 as cv import numpy as np from PIL import Image, ImageDraw..., ImageFont import matplotlib.pyplot as plt 两行代码实现图片压缩 # 当前目录读取一张图片(2.1M) img = cv.imread('naruto.png...') # 压缩图片(152Kb) cv.imwrite('naruto.jpg', img, [cv.IMWRITE_JPEG_QUALITY, 50]) True 查看一下压缩情况(非必要) #

    92720

    前端图片压缩方案及代码实现

    为什么要进行图片压缩? 随着互联网的发展,图片在各种网站和应用中铺天盖地,运营人员在后台管理系统中上传图片时常常忽略的图片的体积大小,随之产生的带宽和服务器容量也大大增加,图片压缩的需求随之产生。...常见的压缩图片的方案有: 1. 将图片压缩后再上传; 2. 利用图床(图片服务器)压缩图片; 虽然图片压缩过后体积会小一些,但是为了加载的更快,常常还会采用以下一些配套加载方案。 1. ...前端图片压缩方案 前端实现图片压缩的基本思路为:在上传图片时,将file转换成image对象, 然后再利用canvas及其 api 将图片压缩成指定体积。 3. ...前端图片压缩方案代码实现 首先将file转换成image对象,这里我们用到了FileReader这个API。...image) }; image.onerror = function (e) { reject(e) }; }) } 以下是图片压缩方法的代码实现

    1.3K20

    iOS 图片压缩方法的示例代码

    本篇文章主要介绍了iOS 图片压缩方法的示例代码,主要有两种压缩图片的方法,有兴趣的可以了解一下,有兴趣的可以了解一下。...两种压缩图片的方法:压缩图片质量(Quality),压缩图片尺寸(Size)。...压缩图片尺寸 与之前类似,比较容易想到的方法是,通过循环逐渐减小图片尺寸,直到图片稍小于指定大小(maxLength)。具体代码省略。同样的问题是循环次数多,效率低,耗时长。...可以用二分法来提高效率,具体代码省略。这里介绍另外一种方法,比二分法更好,压缩次数少,而且可以使图片压缩后刚好小于指定大小(不只是 maxLength * 0.9)。...压缩图片尺寸可以使图片小于指定大小,但会使图片明显模糊(比压缩图片质量模糊)。 两种图片压缩方法结合 如果要保证图片清晰度,建议选择压缩图片质量。如果要使图片一定小于指定大小,压缩图片尺寸可以满足。

    1.7K30

    html中img图片进行等比例缩放的实例代码

    img图片的等比例缩放效果。...width等比例缩放img图片实例代码,及在线编辑器为了可以与原图片的大小进行对照,下面的实例使用HTML的注释符号将等比例缩放的代码进行了注释,第一遍运行完之后,可以将第一行的代码删除(在线删除,因为这是一个在线编辑器...),然后将第二行代码中的注释符号去除掉,接着再运行一遍看看等比例缩放的效果:等比例缩放的另外一种方法当然了,如果要通过同时设置img图片的width和height两个属性来达到等比例缩放图片的话也是可以的,但是要先计算一下图片的宽度和高度的比例,之后再等比例缩放。...原文:html img图片等比例缩放的代码免责声明:内容仅供参考,不保证正确性!

    2.5K21

    图片压缩神器TinyPNG压缩JPGPNG图片

    在很多时候我们都会使用到PNG格式图片,而PNG图片由于其是一种无损的图片格式,它的文件会比较大,为了节约流量、提高加载速度,我们需要对欲上传的图片进行压缩。...兜兜转转一圈,我使用最多的图片压缩工具仍然是 TinyPNG,这个在线服务压缩率高、画质损失小,方便了我为文章配图。 ? TinyPNG检索密钥后,可以立即开始缩小图像。...官方客户端库可用于Ruby,PHP,Node.js,Python,Java和.NET,还可以使用WordPress插件压缩JPEG和PNG图像。...的图片压缩数量,你就说屌不屌吧。...TinyClient是一个超强压缩图片的小工具,压缩率可以达到50%以上,压缩质量接近无损。是一个基于Electron和Tinypng的图片压缩客户端工具。

    5.9K20

    padding实现图片等比例自适应

    但是,如果我们的图片不是通栏,而是需要离左右各1rem的距离,此时,我们的CSS代码就要啰嗦点了,想要保持完美比例,就使用借助CSS3 calc()计算: .banner { height: calc...,CSS代码如下: .banner { padding: 15.15% 0 0; position: relative; } .banner > img { position:...对于复杂布局,如果图片的宽度是不固定的自适应的,我们通常会想到这么一个取巧的做法,就是只设定图片的宽度,例如: img { width: 100%; } 此时浏览器默认会保持图片比例显示,图片宽度大了,...然而这种技巧有一个非常不好的体验问题,那就是随着页面加载的进行,图片占据的高度会有一个从0到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。...缩小浏览器宽度可以看到不同宽度下的布局效果,Gif效果截图如下: 此demo难点就是图片自适应同时保持比例,以及页面刷新的时候没有布局稳固不晃动,其核心HTML和CSS代码如下: <div class=

    2.8K10
    领券