最近碰见一个需求 后端返给图片路径,但是在入参的时候需要转为base64
思索了一天大致分为两种方法
方法一:利用ajax 请求后端返的路径 返回类型变为blob 类型
function getBase64(imgUrl, callback) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
// 至关重要
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
var blob = this.response;
console.log("blob", blob)
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
// 此处拿到的已经是 base64的图片了
let base64 = e.target.result;
callback(base64)
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
}
利用canvas的dataURL
function getBase64(url) {
var url = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
let dataURL = ''
let img = new Image();
img.setAttribute("crossOrigin", 'anonymous');
img.src = url;
console.log(img);
img.onload = () => { // 要先确保图片完整获取到,这是个异步处理
let canvas = document.createElement('canvas'); // 创建canvas元素
let [width, height] = [img.width, img.height]; // 确保canvas的尺寸和图片一样
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(img, 0, 0, width, height); // 将图片绘制到canvas中
dataURL = canvas.toDataURL('image/pdf'); // 转换图片为dataURL
console.log(dataURL);
}
}
根据文件获取url信息
function getObjectURL(file) {
var url = null;
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL !== undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url
}