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