前端图片转base64，转格式，转blob，上传的总结

1. 图片文件转base64

<input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />

 

$(function() { $("#up").change(function() { var file = this.files[0]; if(undefined == file){ return ; } r = new FileReader(); r.readAsDataURL(file); r.onload = function(e) { var base64 = e.target.result; } }); });

这样就获取到了图片文件的base64编码

 

能够把base64直接设置给img的src属性，用作图片回显用

2. canvas图片处理

2.1 canvas绘制图片和压缩图片

var suofang = function(base64, bili, callback) { console.log("执行缩放程序,bili=" + bili); //处理缩放，转格式
    var _img = new Image(); _img.src = base64; _img.onload = function() { var _canvas = document.createElement("canvas"); var w = this.width / bili; var h = this.height / bili; _canvas.setAttribute("width", w); _canvas.setAttribute("height", h); _canvas.getContext("2d").drawImage(this, 0, 0, w, h); } }

压缩图片主要是经过长宽的缩放来缩小图片

 

2.2 canvas转base64

var base64 = canvas.toDataURL("image/png");

　　

还能够传个参数作图片质量的设置，0-1

2.3 canvas转blob

_canvas.toBlob(function(blob) { console.log(blob.size); }, "image/jpeg");

2.4 base转blob

function dataURItoBlob(base64Data) { var byteString; if(base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(',')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); for(var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); }

3. 文件上传

1. base64上传

能够使用ajax请求，发送普通请求便可。

须要注意的是，因为base64比较长，在测试后发现java后端接受到的参数为null。因此使用JSON.stringify()把data数据转成json，在后端用@requestBody接受

2. blog上传

var fd = new FormData(); fd.append("file", blob); //fileData为自定义 
 $.ajax({ type: "post", url: "/file/upload", async: true, data: fd, processData: false, contentType: false, success: function(r) { } });

最后附上完整的代码<图片上传-转base64-缩放-转格式-缩放到不超过1M-ajax上传>

• html

• <input accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="up" />

  • 业务代码

  • $(function() { $("#up").change(function() { imageDeal(this, dealChange); }); }) var dealChange = function(blob, base64) { var fd = new FormData(); fd.append("file", blob); //fileData为自定义 
     $.ajax({ type: "post", url: "/file/upload", async: true, data: fd, processData: false, contentType: false, success: function(r) { } }); }

    • 处理代码

    • var imageDeal = function(ele, returnBase64) { //获取file，转成base64
          var file = ele.files[0]; //取传入的第一个文件
          if(undefined == file) { //若是未找到文件，结束函数，跳出
              return; } console.log("fileSize" + file.size); console.log(file.type); var r = new FileReader(); r.readAsDataURL(file); r.onload = function(e) { var base64 = e.target.result; var bili = 1.5; console.log("压缩前：" + base64.length); suofang(base64, bili, returnBase64); } } var suofang = function(base64, bili, callback) { console.log("执行缩放程序,bili=" + bili); //处理缩放，转格式
          var _img = new Image(); _img.src = base64; _img.onload = function() { var _canvas = document.createElement("canvas"); var w = this.width / bili; var h = this.height / bili; _canvas.setAttribute("width", w); _canvas.setAttribute("height", h); _canvas.getContext("2d").drawImage(this, 0, 0, w, h); var base64 = _canvas.toDataURL("image/jpeg"); _canvas.toBlob(function(blob) { console.log(blob.size); if(blob.size > 1024*1024){ suofang(base64, bili, callback); }else{ callback(blob, base64); } }, "image/jpeg"); } }