Commit 769465b5 authored by rockyl's avatar rockyl

修复背景图解析问题

parent 6ca29584
{ {
"name": "html-shot", "name": "html-shot",
"version": "1.0.13", "version": "1.0.16",
"main": "dist/index.js", "main": "dist/index.js",
"types": "types/index.d.ts", "types": "types/index.d.ts",
"license": "MIT", "license": "MIT",
......
...@@ -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变换
......
...@@ -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((resolve, 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment