js,JQ 圖片轉換base64 base64轉換爲file對象,blob對象

//將圖片轉換爲Base64 --2019-8-21更新,加註釋
//url 圖片連接或者是blob對象
//callback 回調函數
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image;//經過構造函數來建立的 img 實例，在賦予 src 值後就會馬上下載圖片，相比 createElement() 建立 <img> 省去了 append()，也就避免了文檔冗餘和污染
  img.crossOrigin = 'Anonymous';
  //要先確保圖片完整獲取到，這是個異步事件
  img.onload = function(){
    canvas.height = img.height;//確保canvas的尺寸和圖片同樣
    canvas.width = img.width; ctx.drawImage(img,0,0);//將圖片繪製到canvas中
    var dataURL = canvas.toDataURL('image/png');//轉換圖片爲dataURL,傳第二個參數可壓縮圖片,前提是圖片格式jpeg或者webp格式的
    callback(dataURL);//調用回調函數
    canvas = null; }; img.src = url; } //將base64轉換爲文件對象
function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } //轉換成file對象
  return new File([u8arr], filename, {type:mime}); //轉換成成blob對象
  //return new Blob([u8arr],{type:mime});
} //將圖片轉換爲base64,再將base64轉換成file對象
getImgToBase64('images/ruoshui.png',function(data){ 　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg'); 　　　console.log(myFile); });

toDataURL函數說明(能夠壓縮圖片) --2019-8-21添加

canvas.toDataURL(type, encoderOptions);
 type 可選
　　     圖片格式，默認爲 image/png
   encoderOptions 可選
　　     在指定圖片格式爲 image/jpeg 或 image/webp的狀況下，能夠從 0 到 1 的區間內選擇圖片的質量。若是超出取值範圍，將會使用默認值 0.92。其餘參數會被忽略

參考網址:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

上傳圖片的時候只須要將File對象或者Blob對象追加到FormData對象便可 ( 相關文章： http://www.javashuo.com/article/p-vtszgcga-e.html );2019-10-23更新加連接

有不懂的地方能夠留言, 或者聯繫博主.