Skip to content

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

canvas支持

parent 7502863a
Show whitespace changes
Inline Side-by-side
Showing with 53 additions and 27 deletions
package.json
View file @ bbc45333
{ {
"name": "html-shot", "name": "html-shot",
"version": "1.0.4", "version": "1.0.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 @ bbc45333
...@@ -21,7 +21,7 @@ document.body.appendChild(img); ...@@ -21,7 +21,7 @@ document.body.appendChild(img);
| `qaulity` | number | 否 | 0.7 | 导出图片质量 | | `qaulity` | number | 否 | 0.7 | 导出图片质量 |
## 注意点 ## 注意点
* 仅支持img和text两种元素 * 仅支持的元素有：img、text、canvas(svga/spine/lottie)
* 不支持transform变换 * 不支持transform变换
* 文本仅只是Arial字体，建议给元素设置为Arial字体 * 文本仅只是Arial字体，建议给元素设置为Arial字体
* 不支持z-index样式 * 不支持z-index样式
......
src/dom-parser.ts
View file @ bbc45333
...@@ -18,14 +18,24 @@ export function parseDom(el: HTMLElement = document.body) { ...@@ -18,14 +18,24 @@ export function parseDom(el: HTMLElement = document.body) {
let nodes = []; let nodes = [];
walkNode(el, function (childNode) { walkNode(el, function (childNode) {
let vNode, bound, node; let vNode, bound, node;
if (childNode.nodeName === 'IMG') { //其他全部认为是文本 switch(childNode.nodeName){
case 'IMG':
node = childNode; node = childNode;
vNode = { vNode = {
type: 1, type: 1,
src: childNode.src, src: childNode.src,
} }
bound = childNode.getBoundingClientRect(); bound = childNode.getBoundingClientRect();
} else { break;
case 'CANVAS':
node = childNode;
vNode = {
type: 2,
img: childNode,
}
bound = childNode.getBoundingClientRect();
break;
default:
if (childNode.data) { if (childNode.data) {
node = childNode.parentElement; node = childNode.parentElement;
let text = childNode.data.trim(); let text = childNode.data.trim();
...@@ -41,7 +51,9 @@ export function parseDom(el: HTMLElement = document.body) { ...@@ -41,7 +51,9 @@ export function parseDom(el: HTMLElement = document.body) {
} }
} }
} }
break;
} }
if (vNode) { if (vNode) {
const {left, top, width, height} = bound; const {left, top, width, height} = bound;
vNode.x = left - pX; vNode.x = left - pX;
...@@ -60,6 +72,7 @@ export function parseDom(el: HTMLElement = document.body) { ...@@ -60,6 +72,7 @@ export function parseDom(el: HTMLElement = document.body) {
nodes.push(vNode); nodes.push(vNode);
} }
}); });
return { return {
width, width,
height, height,
......
src/toCanvas.ts
View file @ bbc45333
...@@ -12,7 +12,8 @@ interface ICData { ...@@ -12,7 +12,8 @@ interface ICData {
*/ */
enum NodeType { enum NodeType {
TEXT = 0, TEXT = 0,
IMAGE IMAGE,
CANVAS,
} }
/** /**
...@@ -78,6 +79,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba ...@@ -78,6 +79,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
nodes.forEach((n) => { nodes.forEach((n) => {
switch (n.type) { switch (n.type) {
case NodeType.IMAGE: case NodeType.IMAGE:
case NodeType.CANVAS:
drawImage(n, ctx) drawImage(n, ctx)
break break
case NodeType.TEXT: case NodeType.TEXT:
......
test.html
View file @ bbc45333
...@@ -29,15 +29,23 @@ ...@@ -29,15 +29,23 @@
font-style: italic; font-style: italic;
} }
</style> </style>
</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"/> <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"> <p class="ppp">
a<br/>bcdefghij a<br/>bcdefghij
</p> </p>
</div> </div>
<script>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
context.fillRect(0, 0, 50, 30);
</script>
<script src="test.js" type="module"></script> <script src="test.js" type="module"></script>
<button id="button">截图</button>
</body> </body>
</html> </html>
test.js
View file @ bbc45333
...@@ -4,9 +4,11 @@ ...@@ -4,9 +4,11 @@
import {htmlShot} from "./dist/index.js"; import {htmlShot} from "./dist/index.js";
(async function () { async function shot() {
const result = await htmlShot(undefined, {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;
document.body.appendChild(img); document.body.appendChild(img);
})(); }
document.getElementById('button').onclick = shot;
types/toCanvas.d.ts
View file @ bbc45333
...@@ -11,7 +11,8 @@ interface ICData { ...@@ -11,7 +11,8 @@ interface ICData {
*/ */
declare enum NodeType { declare enum NodeType {
TEXT = 0, TEXT = 0,
IMAGE = 1 IMAGE = 1,
CANVAS = 2
} }
/** /**
* 节点数据 * 节点数据
......
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