牛骨文教育服务平台(让学习变的简单)
博文笔记

JS压缩图片(canvas),返回base64码

创建时间:2017-06-05 投稿人: 浏览次数:2461

上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so,改了改

JS   返回的是一个base64字符串

/** 
 * 图片压缩,默认同比例压缩 
 * @param {Object} path     
 *         pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 
 * @param {Object} obj 
 *         obj 对象 有 width, height, quality(0-1) 
 * @param {Object} callback 
 *         回调函数有一个参数,base64的字符串数据 
 */  
function dealImage(path, callback){  
    var img = new Image();  
    img.src = path;  
    img.onload = function(){  
        //默认按比例压缩  
        var w = this.width,  
            h = this.height; 
        var quality = 0.95; // 默认图片质量为0.7  
          
        //生成canvas  
        var canvas = document.createElement("canvas");  
        var ctx = canvas.getContext("2d");  
          
        // 创建属性节点  
        canvas.setAttribute("width", w);  
        canvas.setAttribute("height", h);
                
        ctx.drawImage(this, 0, 0, w, h);  
        // quality值越小,所绘制出的图像越模糊  
        var base64 = canvas.toDataURL("image/jpeg", quality);  
        // 回调函数返回base64的值  
        callback(base64);  
    };  
};

调用方法

// 调用函数处理图片                 
dealImage("路径",function(base){
//直接将获取到的base64的字符串,放到一个image标签中就可看到测试后的压缩之后的样式图了
 document.getElementById("transform").src = base;
 console.log("压缩后:" + base.length / 1024 + " " + base);    
})

压缩前图片:326KB


压缩后图片:196KB


参考代码:点击打开链接

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。