美文网首页
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