Skip to content

H
html-shot
Commit 487693c7 authored by rockyl's avatar rockyl
Browse files
Options

增加backgroundImage样式支持

parent ce861653
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 29 deletions
readme.md
View file @ 487693c7
...@@ -27,3 +27,4 @@ document.body.appendChild(img); ...@@ -27,3 +27,4 @@ document.body.appendChild(img);
* 不支持z-index样式 * 不支持z-index样式
* 不支持下划线样式 * 不支持下划线样式
* 不支持所有滤镜 * 不支持所有滤镜
* 不支持background-image设置图片
src/dom-parser.ts
View file @ 487693c7
/** /**
* Created by rockyl on 2021/1/11. * Created by rockyl on 2021/1/11.
*/ */
import {debugMode} from "./config"; import {debugMode} from "./config.js";
const commonStyleKeys = [ const commonStyleKeys = [
'backgroundColor', 'backgroundColor',
'backgroundImage',
'borderColor', 'borderColor',
'borderStyle', 'borderStyle',
'borderWidth', 'borderWidth',
...@@ -27,7 +28,7 @@ const includeStyleKeys = [ ...@@ -27,7 +28,7 @@ const includeStyleKeys = [
export function parseDom(el: HTMLElement = document.body) { export function parseDom(el: HTMLElement = document.body) {
const {left: pX, top: pY, width, height} = el.getBoundingClientRect(); const {left: pX, top: pY, width, height} = el.getBoundingClientRect();
let nodes = []; let nodes = [], skip = false;
walkNode(el, function (childNode) { walkNode(el, function (childNode) {
let vNode, bound, node, isText; let vNode, bound, node, isText;
switch (childNode.nodeName) { switch (childNode.nodeName) {
...@@ -63,10 +64,17 @@ export function parseDom(el: HTMLElement = document.body) { ...@@ -63,10 +64,17 @@ export function parseDom(el: HTMLElement = document.body) {
} }
} }
break; break;
case '#comment':
skip = true;
break;
default: default:
break; break;
} }
if (skip) {
return;
}
if (!bound && childNode.getBoundingClientRect) { if (!bound && childNode.getBoundingClientRect) {
bound = childNode.getBoundingClientRect(); bound = childNode.getBoundingClientRect();
} }
...@@ -84,7 +92,9 @@ export function parseDom(el: HTMLElement = document.body) { ...@@ -84,7 +92,9 @@ export function parseDom(el: HTMLElement = document.body) {
type: 0, type: 0,
} }
} }
vNode[skey] = styles[skey]; if(styles[skey] !== undefined){
vNode[skey] = styles[skey];
}
} }
} }
...@@ -106,7 +116,7 @@ export function parseDom(el: HTMLElement = document.body) { ...@@ -106,7 +116,7 @@ export function parseDom(el: HTMLElement = document.body) {
} }
}); });
if(debugMode){ if (debugMode) {
console.info(nodes); console.info(nodes);
} }
......
test.html
View file @ 487693c7
...@@ -7,29 +7,38 @@ ...@@ -7,29 +7,38 @@
<script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script> <script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script>
<style> <style>
.poster{ .poster {
position: relative; position: relative;
background-color: orange; background-color: orange;
border-radius: 2.00rem; border-radius: 2.00rem;
border: 0.1rem solid blue; border: 0.1rem solid blue;
} }
.avatar{
border-radius: 1.00rem; .bg {
width: 5.20rem; background-image: url("//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png");
height: 4.40rem; background-size: 100% 100%;
} width: 5.2rem;
height: 4.4rem;
}
.avatar {
border-radius: 1.00rem;
width: 5.20rem;
height: 4.40rem;
}
.ppp { .ppp {
color: green; color: green;
font-size: 0.50rem; font-size: 0.50rem;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
left: 0.10rem; left: 0.10rem;
top: 0.10rem; top: 0.10rem;
text-align: center; text-align: center;
width: 1.00rem; width: 1.00rem;
word-wrap: break-word; word-wrap: break-word;
font-family: Arial; font-family: Arial;
font-style: italic; font-style: italic;
background-color: red; background-color: red;
} }
</style> </style>
...@@ -37,18 +46,21 @@ ...@@ -37,18 +46,21 @@
</head> </head>
<body> <body>
<div id="poster" class="poster"> <div id="poster" class="poster">
<img class="avatar" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/> <div class="bg"></div>
<!--<img class="avatar" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/>
<canvas id="canvas" style="position: absolute; left: 10px; top: 10px;"></canvas> <canvas id="canvas" style="position: absolute; left: 10px; top: 10px;"></canvas>
<p class="ppp"> <p class="ppp">
a<br/>bcdefghij a<br/>bcdefghij
</p> </p>-->
</div> </div>
<!-- <!--
<span style="background-color: rgba(0,255,0,0.5);">span</span>--> <span style="background-color: rgba(0,255,0,0.5);">span</span>-->
<script> <script>
let canvas = document.getElementById('canvas'); /*let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'); let context = canvas.getContext('2d');
context.fillRect(0, 0, 50, 30); context.fillRect(0, 0, 50, 30);*/
window['html-shot/debug-mode'] = true;
</script> </script>
<script src="test.js" type="module"></script> <script src="test.js" type="module"></script>
<button id="button">截图</button> <button id="button">截图</button>
......
test.js
View file @ 487693c7
...@@ -8,6 +8,7 @@ async function shot() { ...@@ -8,6 +8,7 @@ async function shot() {
const result = await htmlShot(document.getElementById('poster'), {type: 'png'}); const result = await htmlShot(document.getElementById('poster'), {type: 'png'});
let img = new Image(); let img = new Image();
img.src = result; img.src = result;
img.style.width = '365px'
document.body.appendChild(img); document.body.appendChild(img);
} }
......
types/dom-parser.d.ts
View file @ 487693c7
/**
* Created by rockyl on 2021/1/11.
*/
export declare function parseDom(el?: HTMLElement): { export declare function parseDom(el?: HTMLElement): {
width: number; width: number;
height: number; height: number;
......
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