图片压缩并转化为base64字符串

图片压缩

/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
 */
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);
    }
}

/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData){
     
    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
     
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
     type:mime});
}

使用示例

<input type="file" id="file" @change="changepic()" style="width:200px" class="form-control" v-model="imageFile"/>
<img src="" id="previewsImg" width="200">

  var pic = $('#file')[0].files[0];
  if(pic.size/1024 > 100){
      //大于100k，进行压缩上传
  //图片压缩
  photoCompress(pic, {
     
       quality: 0.2
   }, function(base64Codes){
       //回调函数
   		//base64Codes为压缩后的图片的 base64字符串
   		//将以base64字符串 转换为Blob对象 以字节流的形式传递到后台
       var bl = convertBase64UrlToBlob(base64Codes);
       //fd.append("imageFile", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
       //vm.uploading(fd);
   });
}

图片预览

 changepic: function() {
     
	var reads= new FileReader();
	f=document.getElementById('file').files[0];
	if(f == undefined || f == ''){
     
		return;
	}
	reads.readAsDataURL(f);
	reads.onload=function (e) {
     
		document.getElementById('previewsImg').src=this.result;
	};
}