码迷,mamicode.com
首页 > Web开发 > 详细

js 压缩图片(只缩小体积,不更改图片尺寸)

时间:2019-09-08 15:33:30      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:ict   浏览器   targe   lse   read   ade   draw   obj   com   

1.情景展示

技术图片

  如上图所示,点击上传图片按钮,调用手机摄像头拍照功能。 

  <input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="image/*" capture="camera" style="display: none;">

  我们知道现在,手机拍照在10MB左右,体积太大,在上传到服务器前,能不能只缩小图片的体积,而不改变图片尺寸?

2.原因分析

  通过canvas实现对图片的重新绘制。 

  代码展示:

/**
 * 图片压缩
 * @explain 借助canvas对图片进行重绘(canvas2DataURL)
 * @param base64Url	base64格式的图片字符串
 * @param imgAttr	重绘图片宽度、高度、质量等属性的设置
 * @param callback	该函数执行完毕后,要执行的回调函数
 * @returns
 */
function photoCompress (base64Url, imgAttr, callback){
    var img = new Image();
    img.src = base64Url;
    img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            // 宽高比例
            scale = w / h;
        w = imgAttr.width || w;
        h = imgAttr.height || (w / scale);
        // 默认图片质量为0.7
        var quality = 0.7;
        //生成canvas
        var canvas = document.createElement(‘canvas‘);
        var ctx = canvas.getContext(‘2d‘);
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        canvas.setAttributeNode(anw);
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量(0-1)
        if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){
            quality = imgAttr.quality;
        }
        // 重绘后的图片类型
        var imgType = imgAttr.type || ‘image/jpeg‘;
        // quality值越小,所绘制出的图像越模糊
        var base64 = canvas.toDataURL(imgType, quality);
        // 回调函数返回base64的值
        callback(base64);
    };
}    

  可自定义设置图片质量,图片的宽高(通过imgAttr设置)。  

3.完整示例

// js 获取文件对象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
    alert("图像上传失败,请重试!");
}
// 文件读取对象
var reader = new FileReader();
// 图片转base64(Blob对象或File对象)
reader.readAsDataURL(fileObj);
// 图片大小<=1MB,size的单位:B(1Mb=1B*1024*1024)
if(fileObj.size/1024 <= 1024) {
    reader.onload = function(e) {
        // 获取对应的base64
        var imgBase64 = e.target.result;
        // 将图片的base64码传给后台
        // 调用腾讯接口
        $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
            // TODO 对返回的接口数据进行自动填充处理
        });
    };
} else {
    // 读取完毕
    reader.onload = function(){
        // 图片转换成为base64Url
        var fileBase64 = this.result;
        // 图片参数
        var imgAttr = {quality : 0.2, type : ‘img/jpeg‘};
        // 回调函数
        var callBack = function (base64Codes) {
            // 图片比较
            // 调用腾讯接口
            
        };
        // 压缩图片
        photoCompress(fileBase64,imgAttr,callBack);
    };
}

  说明:

  前端对图片进行重绘,对浏览器有一定的要求,我测试的时候再电脑端没有问题,但是,在微信上使用时,就会很难受了,会将微信的qq浏览器内核搞垮,根本无法使用。

  不得以,放弃了在前端进行压缩的想法。

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

 相关推荐:

 

js 压缩图片(只缩小体积,不更改图片尺寸)

标签:ict   浏览器   targe   lse   read   ade   draw   obj   com   

原文地址:https://www.cnblogs.com/Marydon20170307/p/11486511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!