JS压缩图片（canvas），返回base64码

最新推荐文章于 2024-03-23 17:56:09 发布

qq_45670012

最新推荐文章于 2024-03-23 17:56:09 发布

阅读量224

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h0k0kh2h1kab&title=JS%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%EF%BC%88canvas%EF%BC%89%EF%BC%8C%E8%BF%94%E5%9B%9Ebase64%E7%A0%81

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

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

更多专业前端知识，请上【猿2048】www.mk2048.com