1、图片转base64
function getBase64Image(img) {
var canvas = document.createElement("canvas")
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, img.width, img.height)
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
var dataURL = canvas.toDataURL("image/" + ext)
return dataURL;
}
2、base64转文件流
function btof(data, fileName) {
const dataArr = data.split(",")
const byteString = atob(dataArr[1])
const options = {
type: "image/jpeg",
endings: "native"
}
const u8Arr = new Uint8Array(byteString.length)
for (let i = 0; i < byteString.length; i++) {
u8Arr[i] = byteString.charCodeAt(i)
}
return new File([u8Arr], fileName + ".jpg", options);
}
3、下载图片
const handleImgDownload = (imgsrc, name) => {
const image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
const url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
const a = document.createElement('a'); // 生成一个a元素
const event = new MouseEvent('click'); // 创建一个单击事件
a.download = name || 'photo'; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
// 在加载的图片地址上加一个时间戳，地址不一样，浏览器就会重新请求新的资源，就不会用缓存的
image.src = imgsrc + '?time=' + new Date().getTime();
};
