Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
canifa_note
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Vũ Hoàng Anh
canifa_note
Commits
493391bb
Commit
493391bb
authored
Dec 13, 2021
by
steven
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
choro: convert html2image to arrow function
parent
7e858509
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
18 additions
and
18 deletions
+18
-18
convertResourceToDataURL.ts
web/src/labs/html2image/convertResourceToDataURL.ts
+2
-2
getCloneStyledElement.ts
web/src/labs/html2image/getCloneStyledElement.ts
+2
-2
getFontsStyleElement.ts
web/src/labs/html2image/getFontsStyleElement.ts
+2
-2
index.ts
web/src/labs/html2image/index.ts
+12
-12
No files found.
web/src/labs/html2image/convertResourceToDataURL.ts
View file @
493391bb
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>
...
@@ -16,6 +16,6 @@ function convertResourceToDataURL(url: string, useCache = true): Promise<string>
};
};
reader
.
readAsDataURL
(
blob
);
reader
.
readAsDataURL
(
blob
);
});
});
}
}
;
export
default
convertResourceToDataURL
;
export
default
convertResourceToDataURL
;
web/src/labs/html2image/getCloneStyledElement.ts
View file @
493391bb
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) {
...
@@ -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
;
web/src/labs/html2image/getFontsStyleElement.ts
View file @
493391bb
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) {
...
@@ -41,6 +41,6 @@ async function getFontsStyleElement(element: HTMLElement) {
}
}
return
styleElement
;
return
styleElement
;
}
}
;
export
default
getFontsStyleElement
;
export
default
getFontsStyleElement
;
web/src/labs/html2image/index.ts
View file @
493391bb
...
@@ -13,22 +13,22 @@ type Options = Partial<{
...
@@ -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)
...
@@ -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) {
...
@@ -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
...
@@ -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
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment