精华内容
下载资源
问答
  • JS压缩图片

    2020-08-16 13:21:06
    js-image-compressor 是一个实现轻量级图片压缩的 javascript 库,压缩后仅有 5kb,在前端页面即可实现对图片压缩。在提供基本图片压缩功能同时,还暴露出图片处理相关公用方法,以及进行边界情况处理: 可以对待...

    作者:wuwhs

    https://segmentfault.com/a/1190000023486410

    说明

    js-image-compressor 是一个实现轻量级图片压缩的 javascript 库,压缩后仅有 5kb,在前端页面即可实现对图片的压缩。在提供基本图片压缩功能同时,还暴露出图片处理相关公用方法,以及进行边界情况处理:

    可以对待转化图片大小设置一定的阈值,使得图片转化成 png 格式在不理想情况下不至于过大,同时大于这个阈值则可以自动转化成 jpeg 格式,实现更优压缩;
    可以限制输出图片宽高大小,从而防止意外情况发生,比如压缩运算过大使得浏览器奔溃;
    默认对 png 输出图片添加透明底色,其他格式设为白色,避免“黑屏”发生;
    提供一些图片处理的常用工具函数(image2Canvas、canvas2Blob 和 canvas2DataUrl 等),用户还可以自定义图片输出的样式特征(比如可以灰度处理、加水印)。

    npm安装

    npm install js-image-compressor -D
    

    github

    https://github.com/wuwhs/js-image-compressor

    展开全文
  • js压缩图片

    2020-04-04 21:54:29
    /*图片压缩方法 imageHandel.imageCompress(若按照指定大小压缩则quality参数无效;按照图片大小压缩会存在误差。) @author luxuebo @Date 2020/04/04 @param file {File|Blob} 需要压缩的的图片 @param config {...

    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) {
            //先转为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
            theBlob.lastModifiedDate = new Date();
            theBlob.name = fileName || Math.random() * 1000000 + '.jpeg';
            return theBlob;
        }
        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

     

    展开全文
  • JS压缩图片的简单代码
  • 图片通过js代码压缩,通过base64压缩图片,修改图片质量或尺寸达到压缩图片体积
  • 主要介绍了HTML5 JS压缩图片并获取图片BASE64编码上传方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动。在测试的过程中我们发现上传的图片非常大。我们知道现在的手机拍出的...于是前端同事就想到先用js压缩图片再上传。我...

    js 压缩图片及ajax上传图片


    最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动。在测试的过程中我们发现上传的图片非常大。我们知道现在的手机拍出的图片都非常的大,一般是2~5M,甚至10多M的都有。这么大的图片上传上来,用户的上传体验非常不好,而且给服务器带宽增加了很大的压力,服务器的磁盘空间也会被渐渐撑爆,即使改成上传到oss,也不是很好的办法。于是前端同事就想到先用js压缩图片再上传。我就跟着偷偷学习一下。

    js压缩图片

    /**
     * js压缩图片
     * @param file 图片文件对象
     * @param quality 压缩倍率 0~1
     * @constructor
     */
    function compressImage(file, quality) {
    
        // 图片小于1M不压缩
        if (file.size < Math.pow(1024, 2)) {
            return file;
        }
        //默认0.5倍压缩
        quality = quality || 0.5;
    		
    	//保存文件名,后边用到
        var name = file.name; 
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            var src = e.target.result;
    
            var img = new Image();
            img.src = src;
            img.onload = function (e) {
                var w = img.width;
                var h = 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质量区间
    
                // 返回base64转blob的值
                console.log('\u539F\u56FE' + (src.length / 1024).toFixed(2) + 'kb', '\u65B0\u56FE' + (base64.length / 1024).toFixed(2) + 'kb');
                //去掉url的头,并转换为byte
                var bytes = window.atob(base64.split(',')[1]);
                //处理异常,将ascii码小于0的转换为大于0
                var ab = new ArrayBuffer(bytes.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < bytes.length; i++) {
                    ia[i] = bytes.charCodeAt(i);
                }
                //通过Blob生成新图片文件对象
                file = new Blob([ab], { type: 'image/jpeg' });
                //这里需要重新设置文件名
                file.name = name;
    
                return file;
            };
            img.onerror = function (e) {
                console.error(e)
            };
        };
        reader.onerror = function (e) {
           console.error(e)
        };
    };
    

    主要用到的原生组件:FileReader、Canvas、Blob、FormData

    逻辑步骤:

    1. FileReader.readAsDataURL将上传的图片文件转为Base64格式
    2. 将img绘制到canvas上,canvas.toDataURL压缩图片
    3. new Blob将压缩后的Base64转为Blob格式
    4. FormData.append将图片文件数据存入formdata

    注意问题:

    1. PNG转JPEG时PNG格式的透明区域会变黑色,需要先手动铺底色
    2. toDataURL参数为PNG时不支持传图片质量,所以需要写image/jpeg或image/webp,具体可以参考toDataURL的api
    3. 需要先保存文件名,然后生成新的图片后设置文件名为原来的文件名。
    4. formData.append第三个参数filename是有浏览器兼容性问题的,如果不传,图片到后台的文件名会变成blob (filename=blob),后端校验文件名可能过不去。我们就遇到了这个问题。

    ajax 上传文件

    /**
     * ajax上传文件
     * @param file 文件对象
     */
    function upload(file) {
        var formData = new FormData();
        formData.append("file", file, file.name);
        $.ajax({
            url: 'asianCup/uploadBarCode',
            dataType: 'json',
            type: "POST",
            cache: false, 
            contentType: false, //必须
            processData: false, //必须
            data: formData,
            async: true,
            success: function (data) {
                if (data.success) {
                    alert("上传成功");
                } else {
                    //异常提示
                    alert(data.code + "-" + data.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            	console.error(errorThrown);
                if (XMLHttpRequest.responseText.indexOf("400") > -1) {
                    //接口或参数出错
                    alert("网络不给力,请稍后再试!");
                } else {
                    //服务器重启
                    alert("网络不给力,请稍后再试!");
                }
            }
        });
    }
    

    ajax上传文件需要构建一个formDate对象,将文件appendj进去,然后把formDate对象放到ajax的data参数即可,如果页面本身已经有表单了,也可以直接放到data,并且下面二个参数是必须的:

    contentType: false,//必须false才会自动加上正确的Content-Type
    processData: false,//必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
    

    参考
    js压缩图片
    ajax上传图片
    压缩及上传

    展开全文
  • 本文介绍js压缩图片的实现原理及实现过程。一、压缩原理js实现对上传图片的路径转成base64编码,把图片用canvas画出来再转成二进制数据,降低分辨率,并且对图片进行压缩。二、具体实现第一步:通过input标签获取...

    vDa04Uvwf5FH2XoSkZgzCPBfIXhoPnwd3Tzw0HfD0fw3Cf878lenc2XQuBa9rpR3c2TonGrn6Brt8Ap2NBAFvo5HYsiWOavZaWVacc9baYkfPN8v8D3gcOFNU3LjoAAAAASUVORK5CYII=

    我们知道,对于你非常清晰的图片,它所占内存十分大,一般我们会使用压缩将图片存放在我们的手里。在JavaScript中,也可以对图片进行压缩。本文介绍js压缩图片的实现原理及实现过程。

    一、压缩原理

    js实现对上传图片的路径转成base64编码,把图片用canvas画出来再转成二进制数据,降低分辨率,并且对图片进行压缩。

    二、具体实现

    第一步:通过input标签获取本地图片

    第二步:把获取到的图片转换成base64格式let fileObj = document.getElementById('file').files[0] //获取文件对象

    let reader = new FileReader() //新建一个FileReader对象

    reader.readAsDataURL(fileObj)//将读取的文件转换成base64格式

    reader.onload = function(e) { console.log(e.target.result) //转换后的文件数据存储在e.target.result中 }

    第三步:使用canvas中的API把图片分辨率调低context.drawImage(image, 0, 0, imageWidth, imageHeight)

    注意:canvas只能处理base64格式的图片

    以上就是js压缩图片的实现原理及实现过程,大家可以套用上述代码压缩图片,不过要理解压缩原理哦~

    展开全文
  • js压缩图片代码

    2018-10-19 17:39:24
    1M以内的0.1秒左右压缩完成,10M以内1点几秒压缩完成 blob/base64格式上传
  • js压缩图片上传插件

    2016-06-21 20:01:59
    js图片压缩功能,减少上传带宽资源
  • 1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.getElementById('img_output'); let blob; function preview(file) { let reader ...
  • 使用JS压缩图片上传图片

    千次阅读 2017-05-28 18:59:30
    对于图片使用JS进行压缩上传
  • 在线DEMOhttps://oktools.net/tinyimg 1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.getElementById('img_output'); let blob; functi...
  • 图片压缩,在很多地方都用的到,是种实用性很高的技术。国内外还有不少此类平台,专门进行图片压缩,比如tinypng。而在nodejs中,要实现一个这类型平台,不难,很容易。NodeJS中进行图片压缩,可以选择三方模块:...
  • 前端H5实现js压缩图片预览上传 &lt;%@page import="tms.dto.LoginProfile"%&gt;&lt;%@page language="java" contentType="text/html; charset=utf-8"%&...
  • js压缩图片脚本

    2020-07-09 13:33:57
    compile.js: const fs = require('fs'); const path = require('path'); const https = require('https'); const crypto = require('crypto'); const { URL } = require('url'); const root = './input', exts = ...
  • js 压缩图片 H5

    2019-09-20 22:53:29
    原理 用 canvas的 toDataURI (type , int) 如果type参数的值为image/jpeg或image/webp,则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数 dataURI转 blob的代码是 copy 来的 压缩代码 /*common...
  • 十分钟教会你原生JS压缩图片,极其精简版 原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路 先通过input标签获取本地图片 把获取到的图片转换成base64格式 使用canvas...
  • 求大神给HTML5 AJAX批量上传图片 有预览 和js压缩图片的demo 先谢谢了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,653
精华内容 1,461
关键字:

js压缩图片