happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

choro: convert html2image to arrow function

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

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

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

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

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

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

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