usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-21 08:49:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

choro: convert html2image to arrow function

Browse Source
This commit is contained in:
steven 2021-12-13 08:26:50 +08:00
parent 7e858509e6
commit 493391bb03
4 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/labs/html2image/convertResourceToDataURL.ts
View File

@ -1,6 +1,6 @@
const cachedResourceMap = new Map<string, string>();
function convertResourceToDataURL(url: string, useCache = true): Promise<string> {
const convertResourceToDataURL = (url: string, useCache = true): Promise<string> => {
if (useCache && cachedResourceMap.has(url)) {
return Promise.resolve(cachedResourceMap.get(url) as string);
}
@ -16,6 +16,6 @@ function convertResourceToDataURL(url: string, useCache = true): Promise<string>
};
reader.readAsDataURL(blob);
});
}
};
export default convertResourceToDataURL;

4
web/src/labs/html2image/getCloneStyledElement.ts
View File

@ -1,6 +1,6 @@
import convertResourceToDataURL from "./convertResourceToDataURL";
async function getCloneStyledElement(element: HTMLElement) {
const getCloneStyledElement = async (element: HTMLElement) => {
const clonedElementContainer = document.createElement(element.tagName);
clonedElementContainer.innerHTML = element.innerHTML;
@ -32,6 +32,6 @@ async function getCloneStyledElement(element: HTMLElement) {
await applyStyles(element, clonedElementContainer);
return clonedElementContainer;
}
};
export default getCloneStyledElement;

4
web/src/labs/html2image/getFontsStyleElement.ts
View File

@ -1,6 +1,6 @@
import convertResourceToDataURL from "./convertResourceToDataURL";
async function getFontsStyleElement(element: HTMLElement) {
const getFontsStyleElement = async (element: HTMLElement) => {
const styleSheets = element.ownerDocument.styleSheets;
const fontFamilyStyles: CSSStyleDeclaration[] = [];
@ -41,6 +41,6 @@ async function getFontsStyleElement(element: HTMLElement) {
}
return styleElement;
}
};
export default getFontsStyleElement;

24
web/src/labs/html2image/index.ts
View File

@ -13,22 +13,22 @@ type Options = Partial<{
pixelRatio: number;
}>;
function getElementSize(element: HTMLElement) {
const getElementSize = (element: HTMLElement) => {
const { width, height } = window.getComputedStyle(element);
return {
width: parseInt(width.replace("px", "")),
height: parseInt(height.replace("px", "")),
};
}
};
function convertSVGToDataURL(svg: SVGElement): string {
const convertSVGToDataURL = (svg: SVGElement): string => {
const xml = new XMLSerializer().serializeToString(svg);
const url = encodeURIComponent(xml);
return `data:image/svg+xml;charset=utf-8,${url}`;
}
};
function generateSVGElement(width: number, height: number, element: HTMLElement): SVGSVGElement {
const generateSVGElement = (width: number, height: number, element: HTMLElement): SVGSVGElement => {
const xmlNS = "http://www.w3.org/2000/svg";
const svgElement = document.createElementNS(xmlNS, "svg");
@ -48,9 +48,9 @@ function generateSVGElement(width: number, height: number, element: HTMLElement)
svgElement.appendChild(foreignObject);
return svgElement;
}
};
export async function toSVG(element: HTMLElement, options?: Options) {
export const toSVG = async (element: HTMLElement, options?: Options) => {
const { width, height } = getElementSize(element);
const clonedElement = await getCloneStyledElement(element);
@ -65,9 +65,9 @@ export async function toSVG(element: HTMLElement, options?: Options) {
const url = convertSVGToDataURL(svg);
return url;
}
};
export async function toCanvas(element: HTMLElement, options?: Options): Promise<HTMLCanvasElement> {
export const toCanvas = async (element: HTMLElement, options?: Options): Promise<HTMLCanvasElement> => {
const url = await toSVG(element, options);
const imageEl = new Image();
@ -96,12 +96,12 @@ export async function toCanvas(element: HTMLElement, options?: Options): Promise
resolve(canvas);
};
});
}
};
async function toImage(element: HTMLElement, options?: Options) {
const toImage = async (element: HTMLElement, options?: Options) => {
const canvas = await toCanvas(element, options);
return canvas.toDataURL();
}
};
export default toImage;