Javascript - 將img轉換為baseURL編碼

2014-11-23 7:50 PM

程式碼範例

function convertImgToBase64(img){
 var canvas  = document.createElement('CANVAS');
 var ctx  = canvas.getContext('2d');
 
 canvas.height  = img.height;
 canvas.width  = img.width;
 ctx.drawImage(img, 0, 0);
 
 var dataURL = canvas.toDataURL();
 canvas = null; 
 
  return dataURL;
}

詳細解說

function convertImgToBase64(img){
 // 首先建立canvas物件 必須使用到cavas物件的方法
  var canvas  = document.createElement('CANVAS');
  // 設定內容為2D
  var ctx  = canvas.getContext('2d');
 
 // 將cavas的寬高設定為與圖片相同
 canvas.height  = img.height;
 canvas.width  = img.width;

 // 繪製圖片至cavas內
 ctx.drawImage(img, 0, 0);
  
 // 使用cavas的toDataURL功能轉換為base64編碼
 var dataURL = canvas.toDataURL();

 // 清除cavas物件
 canvas = null; 
  
  return dataURL;
}

各項資料連結

Canvas教學 - MDN