[转]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编码值
});