Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
H
html-shot
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
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
劳工
html-shot
Commits
769465b5
Commit
769465b5
authored
Feb 09, 2021
by
rockyl
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修复背景图解析问题
parent
6ca29584
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
26 additions
and
11 deletions
+26
-11
package.json
package.json
+1
-1
readme.md
readme.md
+5
-0
toCanvas.ts
src/toCanvas.ts
+20
-10
No files found.
package.json
View file @
769465b5
{
{
"name"
:
"html-shot"
,
"name"
:
"html-shot"
,
"version"
:
"1.0.1
3
"
,
"version"
:
"1.0.1
6
"
,
"main"
:
"dist/index.js"
,
"main"
:
"dist/index.js"
,
"types"
:
"types/index.d.ts"
,
"types"
:
"types/index.d.ts"
,
"license"
:
"
MIT
"
,
"license"
:
"
MIT
"
,
...
...
readme.md
View file @
769465b5
...
@@ -20,6 +20,11 @@ document.body.appendChild(img);
...
@@ -20,6 +20,11 @@ document.body.appendChild(img);
|
`type`
| 'canvas'
|
'jpeg'
|
'png' | 否 | 'png' | 导出类型 |
|
`type`
| 'canvas'
|
'jpeg'
|
'png' | 否 | 'png' | 导出类型 |
|
`qaulity`
| number | 否 | 0.7 | 导出图片质量 |
|
`qaulity`
| number | 否 | 0.7 | 导出图片质量 |
## 开启调试
```
js
window
[
'html-shot/debug-mode'
]
=
true
```
## 注意点
## 注意点
*
仅支持的元素有:img、text、canvas(svga/spine/lottie)
*
仅支持的元素有:img、text、canvas(svga/spine/lottie)
*
不支持transform变换
*
不支持transform变换
...
...
src/toCanvas.ts
View file @
769465b5
...
@@ -61,10 +61,10 @@ export interface RenderOptions {
...
@@ -61,10 +61,10 @@ export interface RenderOptions {
* @return Promise<HTMLCanvasElement | string>
* @return Promise<HTMLCanvasElement | string>
*/
*/
export
async
function
toCanvas
(
data
:
ICData
,
options
:
RenderOptions
=
{},
callback
?:
(
canvas
:
HTMLCanvasElement
)
=>
void
):
Promise
<
HTMLCanvasElement
|
string
>
{
export
async
function
toCanvas
(
data
:
ICData
,
options
:
RenderOptions
=
{},
callback
?:
(
canvas
:
HTMLCanvasElement
)
=>
void
):
Promise
<
HTMLCanvasElement
|
string
>
{
const
{
type
:
exportType
=
'png'
,
quality
=
0.7
}
=
options
;
const
{
type
:
exportType
=
'png'
,
quality
=
0.7
}
=
options
;
let
{
scale
=
window
[
'devicePixelRatio'
]
||
1
}
=
options
;
let
{
scale
=
window
[
'devicePixelRatio'
]
||
1
}
=
options
;
let
{
nodes
,
width
,
height
}
=
data
;
let
{
nodes
,
width
,
height
}
=
data
;
width
*=
scale
;
width
*=
scale
;
height
*=
scale
;
height
*=
scale
;
...
@@ -91,14 +91,22 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
...
@@ -91,14 +91,22 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
//背景图片标签
//背景图片标签
if
(
n
.
backgroundImage
)
{
if
(
n
.
backgroundImage
)
{
p
.
push
(
p
.
push
(
new
Promise
((
r
)
=>
{
new
Promise
((
r
esolve
,
reject
)
=>
{
let
img
=
new
Image
();
let
img
=
new
Image
();
img
.
crossOrigin
=
'anonymous'
img
.
crossOrigin
=
'anonymous'
img
.
onload
=
()
=>
{
img
.
onload
=
()
=>
{
n
.
imgBg
=
img
;
n
.
imgBg
=
img
;
r
()
resolve
()
}
img
.
onerror
=
()
=>
{
reject
(
`html shot error: can't fetch image[
${
img
.
src
}
]`
);
}
let
result
=
n
.
backgroundImage
.
match
(
/url
\((
.*
)
*
\)
/
);
if
(
result
)
{
img
.
src
=
result
[
1
].
replace
(
/
[
'"
]
/g
,
''
);
}
else
{
reject
(
`html shot error: can't parse
${
n
.
backgroundImage
}
`
)
}
}
img
.
src
=
n
.
backgroundImage
.
replace
(
'url("'
,
""
).
replace
(
'")'
,
""
);
})
})
)
)
}
}
...
@@ -143,7 +151,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
...
@@ -143,7 +151,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
* @param scale
* @param scale
*/
*/
function
drawImage
(
data
:
INodeData
,
ctx
:
CanvasRenderingContext2D
,
scale
:
number
)
{
function
drawImage
(
data
:
INodeData
,
ctx
:
CanvasRenderingContext2D
,
scale
:
number
)
{
let
{
x
,
y
,
img
,
width
,
height
,
borderRadius
:
borderRadiusTxt
}
=
data
;
let
{
x
,
y
,
img
,
width
,
height
,
borderRadius
:
borderRadiusTxt
}
=
data
;
x
*=
scale
;
x
*=
scale
;
y
*=
scale
;
y
*=
scale
;
width
*=
scale
;
width
*=
scale
;
...
@@ -259,11 +267,13 @@ function drawBackgroundColor(data: INodeData, ctx: CanvasRenderingContext2D, sca
...
@@ -259,11 +267,13 @@ function drawBackgroundColor(data: INodeData, ctx: CanvasRenderingContext2D, sca
}
}
function
drawBorder
(
data
:
INodeData
,
ctx
:
CanvasRenderingContext2D
,
scale
:
number
)
{
function
drawBorder
(
data
:
INodeData
,
ctx
:
CanvasRenderingContext2D
,
scale
:
number
)
{
let
{
x
,
y
,
width
,
height
,
let
{
x
,
y
,
width
,
height
,
borderRadius
:
borderRadiusTxt
,
borderRadius
:
borderRadiusTxt
,
borderWidth
:
borderWidthTxt
,
borderWidth
:
borderWidthTxt
,
borderColor
}
=
data
;
borderColor
}
=
data
;
let
borderRadius
=
parseFloat
(
borderRadiusTxt
)
*
scale
;
let
borderRadius
=
parseFloat
(
borderRadiusTxt
)
*
scale
;
let
borderWidth
=
parseFloat
(
borderWidthTxt
)
*
scale
;
let
borderWidth
=
parseFloat
(
borderWidthTxt
)
*
scale
;
x
*=
scale
;
x
*=
scale
;
...
@@ -320,4 +330,4 @@ function borderRadiusPath(data: INodeData, ctx: CanvasRenderingContext2D, scale:
...
@@ -320,4 +330,4 @@ function borderRadiusPath(data: INodeData, ctx: CanvasRenderingContext2D, scale:
ctx
.
arcTo
(
x
,
y
,
x
+
radius
,
y
,
radius
)
ctx
.
arcTo
(
x
,
y
,
x
+
radius
,
y
,
radius
)
ctx
.
closePath
();
ctx
.
closePath
();
}
}
}
}
\ No newline at end of file
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