美文网首页
js图片压缩上传(未裁剪)

js图片压缩上传(未裁剪)

作者: leesession | 来源:发表于2017-12-11 15:46 被阅读0次
//对将图片转为base64
function dealImage(path, obj){
    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 );
    }
}
//此处的#teamlogo为 change的input ,
$(document).on('change', '#teamlogo', function () { //PictureUrl为input file 的id
    function getObjectURL(file) {
    var url = null;
    if (window.createObjcectURL != undefined) {
    url = window.createOjcectURL(file);
    } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(file);
    }
    return url;
    }
    var objURL = getObjectURL(this.files[0]);//这里的objURL就是input file的真实路径
    //调用方法
    dealImage(objURL,{})
});

相关文章

网友评论

      本文标题:js图片压缩上传(未裁剪)

      本文链接:https://www.haomeiwen.com/subject/ediiixtx.html