图片压缩转base64

//公司环境上传

var base64OssFileArray ='';

var newEnvironmentImgArray ='';

layui.use(['upload','form'], function () {

var $ =layui.jquery,

        upload =layui.upload,

        form =layui.form;

    var uploadInst = upload.render({

elem:'#phone',

        auto:false,

        multiple:true,

        //size:2048,

        number:5,

        choose:function(obj){

var num = $('.phone').length;

            obj.preview(function (index, file, result) {

if(file.size >0){

photoCompress(file,{quality:0.2},function (base64Codes) {

if(num>4){

return;

                        }else{

var phoneList =

'

'+

''+

'

'+'×'+'

'+

'

';

                            $('.phoneList ul').append(phoneList);

                        }

num++;

                    });

                }

});

        }

});

});

//上传图片压缩

function photoCompress(file,w,objDiv){

var ready=new FileReader();

    /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/

    ready.readAsDataURL(file);

    ready.onload=function(){

var re=this.result;

        canvasDataURL(re,w,objDiv)

}

}

function canvasDataURL(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.7;  // 默认图片质量为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);

        // 回调函数返回base64的值

        callback(base64);

    }

}