1、文件转 Base64
const blob2Base64 = (() => {
const fileReader = new FileReader();
let resolver = null, errHandler = null;
fileReader.onload = () => resolver(fileReader.result);
fileReader.onerror = err => errHandler(err);
return file => {
fileReader.readAsDataURL(file);
return new Promise((resolve, reject) => {
resolver = resolve;
errHandler = reject;
})
}
})();
这种代码最常用于读取用户选取的图片,使用的时候:
const readFileFromInput = async event => {
const { target: { files: [file] }} = event;
const base64 = await blob2Base64(file);
console.log('read data as base64:', base64);
}
document.querySelector('input[type="file"]').addEventListener('change', readFileFromInput);
2、从URL加载图片
const loadImageFromURL = (() => {
const image = new Image();
image.setAttribute('crossOrigin', 'Anonymous');
let resolver = null, errHandler = null;
image.onload = () => {
resolver(image);
};
image.onerror = err => {
errHandler(err);
};
return URL => {
return new Promise((resolve, reject) => {
resolver = resolve;
errHandler = reject;
image.src = URL;
});
}
})();
3、获取图片BitMap数据
const imageFileToImageData = (() => {
const canvas = document.createElement('canvas');
canvas.setAttribute('crossOrigin', 'Anonymous');
const context = canvas.getContext('2d');
return async blob => {
const image = await loadImageFromURL(await blob2Base64(blob));
const { width, height } = image;
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
context.drawImage(image, 0, 0, width, height);
return context.getImageData(0, 0, width, height);
};
})();
4、文件下载
const downLoadPicByURL = (() => {
const anchor = document.createElement('a');
return (URL, filename = 'download') => {
anchor.setAttribute('href', URL);
anchor.setAttribute('download', filename);
anchor.click();
}
})();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)