[轉]JS將圖片轉爲base64編碼

本文轉自：https://blog.csdn.net/DeMonliuhui/article/details/79731359

1.根據img標籤獲取base64編碼
/**
*
* @param img html的img標籤
* @param ext 圖片格式
* @returns {string}
*/
function getImageBase64(img, ext) {
var canvas = document.createElement("canvas"); //建立canvas DOM元素，並設置其寬高和圖片同樣
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height); //使用畫布畫圖
var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64編碼的URL並指定格式
canvas = null; //釋放
return dataURL;
}


使用
var user_icon = document.getElementById('icon');
user_icon.src = img_path; //指定圖片路徑
user_icon.onload = function () {
base64 = getImageBase64(user_icon, fileExt); //base64編碼
}

2.根據圖片路徑獲取base64編碼
/**
*
* @param url 圖片路徑
* @param ext 圖片格式
* @param callback 結果回調
*/
function getUrlBase64(url, ext, callback) {
var canvas = document.createElement("canvas"); //建立canvas DOM元素
var ctx = canvas.getContext("2d");
var img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function () {
canvas.height = 60; //指定畫板的高度,自定義
canvas.width = 85; //指定畫板的寬度，自定義
ctx.drawImage(img, 0, 0, 60, 85); //參數可自定義
var dataURL = canvas.toDataURL("image/" + ext);
callback.call(this, dataURL); //回掉函數獲取Base64編碼
canvas = null;
};
}

使用
getUrlBase64(path, ext, function (base64) {
console.log(base64);//base64編碼值
});