js压缩图片

最新推荐文章于 2023-01-11 16:34:22 发布
最新推荐文章于 2023-01-11 16:34:22 发布
阅读量533 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42454941/article/details/105318197
版权

1.压缩方法

/*图片压缩方法 imageHandel.imageCompress(若按照指定大小压缩则quality参数无效；按照图片大小压缩会存在误差。)
@author luxuebo
@Date 2020/04/04
@param file {File|Blob} 需要压缩的的图片
@param config {Object} 配置
@param config.quality {Number} 图片压缩质量 取值0-1，最小颗粒度为0.01
@param config.width {Number} 压缩后的图片宽度，默认值原始图片宽度
@param config.height {Number} 压缩后的图片高度，默认值原始图片高度
@param config.size {Number} 压缩后的图片大小，单位kb
@param config.img {DOM元素} 压缩后的图片展示位置
@param config.success {Function）} 压缩成功返回结果对象，包含：sourceFile(源文件)、file（压缩后的文件）、base64（压缩后的base64编码）
@return 无返回值
备注：如果按照图片大小压缩，图片较大，建议先用先按照quality压缩一次，在按照图片大小压缩，否则耗时较长
使用例子：
imageHandel.imageCompress(file, {
    size: 200,//非必填
    // quality: 0.6,//非必填
    // width: 100,//非必填
    // height: 100,//非必填
    img: document.getElementById('compressResult'),//非必填
    success: function (res) {
        console.log(res)
    }
})

*/
; (function () {
    function imageCompress(file, config) {
        if (!file) {
            console.log('请传入要压缩的图片')
            return ;
        }
        if(!config){
            config = {};
        }
        if (config.size) {
            if (file.size / 1024 < config.size) {
                console.log('图片小于指定值，不需要压缩')
                fileToBase64(file, function (base64Data) {
                    imgView(base64Data, config.img)
                    config.success({
                        sourceFile: file,
                        file: file,
                        base64: {
                            size: getBase64Size(base64Data, file.type),
                            base64Data: base64Data
                        }
                    })
                })
            } else {
                compressMethods(file, config, 0, 1, 0.5)
            }

        } else {
            var quality = config.quality ? config.quality : 0.9;
            fileToBase64(file, function (base64Data) {
                imgView(base64Data, null, function (img) {
                    var w = config.width ? config.width : img.width;
                    var h = config.height ? config.height : img.height;
                    // 生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 创建属性节点
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);

                    // 铺底色 PNG转JPEG时透明区域会变黑色
                    ctx.fillStyle = "#fff";
                    ctx.fillRect(0, 0, w, h);

                    ctx.drawImage(img, 0, 0, w, h);
                    // quality值越小，所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality); // 图片格式jpeg或webp可以选0-1质量区间
                    imgView(base64, config.img)
                    //返回结果
                    config.success({
                        sourceFile: file,
                        file: base64ToBlob(base64),
                        base64: {
                            size: getBase64Size(base64, 'image/jpeg'),
                            base64Data: base64
                        }
                    })
                })
            })
        }
    }
    function compressMethods(File, config, leftQuality, rightQuality, quality) {
        //采用二分法计算
        /*
        @param File 要压缩的图片
        @param config 配置参数
        @param leftQuality，二分法左临界值
        @param rightQuality 二分法右临界值
        @param quality 压缩质量
        */
        var reader = new FileReader();//IE10+
        if (File) {
            //读取指定的 Blob 或 File 对象  触发loadend 事件 并将图片的base64编码赋值给result
            reader.readAsDataURL(File);
            //异步通信 回调函数返回
            reader.onload = function (e) {
                var base64Data = reader.result;
                //返回base64编码
                var img = new Image();
                img.src = base64Data;
                img.onload = function (e) {
                    compress(File, img, config, leftQuality, rightQuality, quality)

                }
                img.onerror = function (err) {
                    console.log('图片预览加载失败')
                }
            }
        }
    }
    function compress(File, img, config, leftQuality, rightQuality, quality) {
        var w = config.width ? config.width : img.width;
        var h = config.height ? config.height : img.height;
        // 生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);

        // 铺底色 PNG转JPEG时透明区域会变黑色
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, w, h);

        ctx.drawImage(img, 0, 0, w, h);
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality); // 图片格式jpeg或webp可以选0-1质量区间
        //压缩结果
        var res = {
            sourceFile: File,
            file: base64ToBlob(base64),
            base64: {
                size: getBase64Size(base64, 'image/jpeg'),
                base64Data: base64
            }
        }
        if (res.base64.size / 1024 > config.size) {
            if (rightQuality == leftQuality || rightQuality == quality || leftQuality == quality) {
                //存在的误差，比给定要压缩的值要大一些
                imgView(res.base64.base64Data, config.img)
                config.success(res)
            } else {
                var rightQuality = quality;
                var quality = ((leftQuality + rightQuality) / 2).toFixed(2) * 1
                compress(File, img, config, leftQuality, rightQuality, quality)
            }

        } else if (res.base64.size / 1024 < config.size) {
            if (rightQuality == leftQuality || rightQuality == quality || leftQuality == quality) {
                //存在的误差，比给定要压缩的值要小一些
                imgView(res.base64.base64Data, config.img)
                config.success(res)
            } else {
                var leftQuality = quality;
                var quality = ((leftQuality + rightQuality) / 2).toFixed(2) * 1
                compress(File, img, config, leftQuality, rightQuality, quality)
            }
        } else {
            imgView(res.base64.base64Data, config.img)
            config.success(res)
        }
    }
    function imgView(base64Data, domtag, callback) {
        var img = new Image();
        img.src = base64Data;
        img.onload = function (e) {
            if (domtag) {
                domtag.appendChild(img)
            }
            callback && callback(img)
        }
        img.onerror = function (err) {
            console.log('图片预览加载失败')
        }
    }
    function fileToBase64(File, callback) {
        var reader = new FileReader();//IE10+
        if (File) {
            //读取指定的 Blob 或 File 对象  触发loadend 事件 并将图片的base64编码赋值给result
            reader.readAsDataURL(File);
            //reader.readAsText(File)
            //异步通信 回调函数返回
            reader.onload = function (e) {
                var base64Data = reader.result;
                //返回base64编码
                callback(base64Data);
            }
        }
    }
    function getBase64Size(base64str, type) {
        //获取base64图片大小，返回kb数字
        let str = base64str.replace('data:' + type + ';base64,', '');
        let equalIndex = str.indexOf('=');
        if (str.indexOf('=') > 0) {
            str = str.substring(0, equalIndex);
        }
        let strLength = str.length;
        let fileLength = parseInt(strLength - (strLength / 8) * 2);
        return fileLength;
    }
    function base64ToBlob(dataurl, fileName) {
       
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        var theBlob = new Blob([u8arr], { type: mime });

        
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName || Math.random() * 1000000 + '.jpeg';
        return theBlob;
    }

function base64ToFile(dataurl, fileName) {
      //先转为Blob
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      var theBlob = new Blob([u8arr], { type: mime });

      //再转为File
      let theFile = new File([theBlob], fileName, { type: mime });
      return theFile;
    }
    window.imageHandel = {
        imageCompress: imageCompress,
        fileToBase64: fileToBase64,
        getBase64Size: getBase64Size,
        base64ToBlob: base64ToBlob
    }
}());

2.使用例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image-compress</title>
    <script src="./compress-img.js"></script>
</head>

<body>
    <input type="file" id="file">
    <button id="ys">压缩</button>
    <div id="compressResult">
    </div>
    <script>
        var ysbtn = document.getElementById('ys')
        ysbtn.addEventListener('click', function () {
            var file = document.getElementById('file').files[0];
            imageHandel.imageCompress(file, {
                size: 200,
                // quality: 0.6,
                // width: 100,
                // height: 100,
                img: document.getElementById('compressResult'),
                success: function (res) {
                    console.log(res)
                }
            })
        })
    </script>
</body>

</html>

3.推荐两个插件

3.1.https://github.com/think2011/localResizeIMG

3.2 https://github.com/WangYuLue/image-conversion

 

baiduren！
关注
JavaScript 压缩图片
且听风吟的博客
01-18 6196
上传图片时候，遇到要上传很大的图片，上传的时候就会很慢。所以，需要对图片进行压缩处理来优化上传功能。 图片压缩函数： /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.
js 实现压缩图片
qq_44862552的博客
03-15 254
JavaScript本身没有提供压缩图片的方法，但是可以使用第三方库或API来实现。一种常用的方法是使用canvas，将图片绘制到canvas上，再将canvas转换为图片格式。在绘制时可以控制canvas的尺寸，从而达到压缩图片的效果。
js图片压缩
07-24
很好用的图片压缩，不会影响图片质量，好用，希望能帮到某些朋友
JavaScript 图像压缩
商内在的博客
01-11 5041
这个示例代码中，在主线程中通过创建一个 Worker 对象并加载一个 worker.js 文件来启动一个后台线程. 在 worker.js 中，我们在 onmessage 中定义了图像压缩的逻辑，并使用 postMessage 来将压缩后的图像发送回主线程。值得注意的是，这个示例代码中进行图像压缩时的质量是每次减少0.1，如果压缩后的图像的文件大小仍然超出限制，可能需要调整这个减少量，或者考虑其他压缩策略，比如更改图像的分辨率等。该参数的值应该在 0 到 1 之间，表示图像质量的百分比。
html纯前端压缩图片神器，js压缩图片保持原有像素，html图片压缩自定义大小
08-03
"js压缩图片保持原有像素"意味着这个工具在压缩图片时，尽可能地保留原始图片的细节。它通过调整图片的位深度和压缩算法来减小文件大小，而不是简单地降低图片分辨率或尺寸。这确保了压缩后的图片质量仍然较高。 ...
js压缩图片代码
10-19
1M以内的0.1秒左右压缩完成，10M以内1点几秒压缩完成 blob/base64格式上传
js压缩图片，js图片base64压缩上传
04-19
本文将详细讨论如何使用JavaScript（js）来压缩图片，并将其转换为Base64编码进行上传。这一技术常用于前端开发，以提升用户体验并降低服务器压力。 首先，我们需要了解JavaScript中的Image对象。这是处理图片的...
js 压缩图片的示例（只缩小体积，不更改图片尺寸）
01-21
　如上图所示，点击上传图片按钮，调用手机摄像头拍照功能。  　<input onchange=”[removed]imgFun.uploadPicture();” type=”file” name=”file” id=”file” accept=”image/*” capture=”camera” style...
JS 压缩图片
qq_39025670的博客
09-10 1433
由于用户上传的图片大小不固定，为了节约带宽，前端需要做个图片压缩再上传到服务器。 注意：本文中图片压缩方法只能将压缩后的图片固定保存为 “image/jpeg” 格式，不能设置为 “image/png” 格式（该格式压缩无效）。 具体代码如下 压缩相关的方法： /** * 文件转base64 * @param {File} file 需要转换的文件 * @param {Function} callback 回调函数, 执行回调后返回 base64 格式图片 */ export function im
JS 图片压缩
高先生的猫
06-17 391
说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？当然可以，那我们先来理一下思路。 压缩思路 涉及到 JS 的图片压缩，我的想法是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下： 获取上传 Inp.
js 图片压缩
CY的博客
04-22 390
//压缩方法 function compress(img) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); var tCanvas = document.createElement("canvas"); ...
JS图片压缩
qq_27185143的博客
05-26 282
最近在做移动端遇到了一个问题就是：手机拍照后，图片过大如果上传到服务器务必会浪费带宽，最重要的是流量啊别慌，好事儿来了，务必就会有人去研究研究图片的压缩： 鄙人结合前人的经验，结合自己实战，总结出一个方法供大家参考: /** * 图片压缩，默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片
使用js图片压缩
weixin_44105087的博客
06-08 2141
压缩原理：将图片读入canvas，并使用canvas的toDataURL方法将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。
js 压缩 图片大小
最新发布
02-02
在JavaScript中，可以使用Canvas API来压缩图片大小。下面是一个简单的示例代码： ```javascript // 创建一个新的Image对象 var img = new Image(); // 设置图片源 img.src = '原始图片路径'; // 当图片加载完成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值