前置知识:
1.HTMLCanvasElement.toDataURL()会将canvas转为base64格式的字符串
2.CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight)的用法
// 在src/hooks/index.ts中
import { onMounted } from "vue";
// 这里的elStr是用来作为选择器来选择图片的,所以要为存在标签,类名,id等选择器
export default (elStr: string): Promise<{ dataURL: string }> => {
return new Promise((resolve) => {
onMounted(() => {
let img: HTMLImageElement = document.querySelector(
elStr
) as HTMLImageElement;
img.onload = () => {
resolve({ dataURL: toBase64(img) });
};
function toBase64(img: HTMLImageElement) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
// 注:这里的格式由你引入的图片格式决定,如image/jpg,image/png等
return canvas.toDataURL("image/png");
}
});
});
};
使用:例如在main.js中引入自定义该 hook 使用,注:自定义hook尽可能使用use作为开头。
// 在main.js中
import useBase64 from "@/hooks";
useBase64(".ai").then((res) => {
console.log(res.dataURL);
});
之后就会在控制台打印出图片转为的base64格式的字符串。
图片转为base64格式会增加其体积,但是同时不会向服务器发送网络请求,我们转base64格式都是会转一些图片体积较小的图片,转为base64格式也不会大幅增加其体积。