您的位置:首页 > Web前端 > JavaScript

js 压缩大图片

2017-10-12 14:22 162 查看
dealImage(getObjectURL(fileObj[0]), {width : 200}, function(base){

                $(".testImg").attr("src",base);  

 })

/**

     * 图片压缩,默认同比例压缩

     * @param {Object} path

     *   pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径

     * @param {Object} obj

     *   obj 对象 有 width, height, quality(0-1)   不传width和 height,图片大小不变只改变像素值

     * @param {Object} callback

     *   回调函数有一个参数,base64的字符串数据

     */

function dealImage(path, obj, callback){

        var img = new Image();

        img.src = path;

        img.onload = function(){

            var that = this;

            // 默认按比例压缩

            var w = that.width,

            h = that.height,

            scale = w / h;

            w = obj.width || w;

            h = obj.height || (w / scale);

            var quality = 0.3;  // 默认图片质量为0.7

            //生成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);

            ctx.drawImage(that, 0, 0, w, h);

            // 图像质量

            if(obj.quality && obj.quality <= 1 && obj.quality > 0){

                quality = obj.quality;

            }

            // quality值越小,所绘制出的图像越模糊

            var base64 = canvas.toDataURL('image/jpeg', quality );

            // 回调函数返回base64的值

            callback(base64);

        }

    }      
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: