前端圖片轉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");
          }
      }