js图片压缩 H5

//获取图片URL
function getObjectURL(file){
    var url = null ; 
    if (window.createObjectURL!=undefined) {  // basic
      url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) {       // mozilla(firefox)
      url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // web_kit or chrome
      url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
//图片压缩
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.2;  // 默认图片质量为0.2
        //生成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);
    }
}
//使用压缩  
$('#photo_id').change(function(){
            //图片路径
            var imageData = getObjectURL($(this)[0].files[0]);
            //调用压缩方法 图片路径  图片对象  回调方法
            dealImage(imageData,$(this)[0].files[0],function(base64Img){
                  //post上传base64
                 $.post('test.php',{'imageData':base64Img.split(",")[1],},function(data){
                    $('#imageView').attr('src',data.url);
                },'json');
            });
        });


喜欢(0)

评论 抢沙发

表情