首次发布

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+
+dist

.npmignore

+# Created by .ignore support plugin (hsz.mobi)
+
+src
+test.html
+test.js
+*.iml

dist/ToCanvas.js

-/**
- * 节点类型
- */
-var NodeType;
-(function (NodeType) {
-    NodeType[NodeType["TEXT"] = 0] = "TEXT";
-    NodeType[NodeType["IMAGE"] = 1] = "IMAGE";
-})(NodeType || (NodeType = {}));
-/**
- *
- * @param data
- * @param callback
- */
-export async function toCanvas(data, callback) {
-    const { nodes, width, height } = data;
-    var canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    var ctx = canvas.getContext("2d");
-    //先加载完所有图片
-    var p = [];
-    nodes.forEach((n) => {
-        if (n.type !== NodeType.IMAGE)
-            return;
-        p.push(new Promise((r) => {
-            let img = new Image();
-            img.onload = () => {
-                n.img = img;
-                r();
-            };
-            img.src = n.src;
-        }));
-    });
-    if (p.length)
-        await Promise.all(p);
-    nodes.forEach((n) => {
-        switch (n.type) {
-            case NodeType.IMAGE:
-                drawImage(n, ctx);
-                break;
-            case NodeType.TEXT:
-                drawText(n, ctx);
-                break;
-        }
-    });
-    callback && callback(canvas);
-    return canvas;
-}
-/**
- * 绘制图片
- * @param data
- * @param ctx
- */
-function drawImage(data, ctx) {
-    const { x, y, img, width, height, borderRadius } = data;
-    if (borderRadius) { //有圆角,画遮罩,暂时只管一个
-        ctx.save();
-        let max = (width < height ? width : height) / 2;
-        let radius = Math.min(+borderRadius.replace("px", ""), max);
-        // ctx.beginPath();
-        // ctx.moveTo(x, y + radius);
-        // ctx.quadraticCurveTo(x, y, x + radius, y);
-        // ctx.lineTo(x + width - radius, y);
-        // ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-        // ctx.lineTo(x + width, y + height - radius);
-        // ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-        // ctx.lineTo(x + radius, y + height);
-        // ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-        // ctx.lineTo(x, y + radius);
-        // ctx.clip();
-        ctx.beginPath();
-        ctx.moveTo(x + width - radius, y);
-        ctx.arcTo(x + width, y, x + width, y + radius, radius);
-        ctx.lineTo(x + width, y + height - radius);
-        ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
-        ctx.lineTo(x + radius, y + height);
-        ctx.arcTo(x, y + height, x, y + height - radius, radius);
-        ctx.lineTo(x, y + radius);
-        ctx.arcTo(x, y, x + radius, y, radius);
-        ctx.closePath();
-        ctx.clip();
-    }
-    ctx.drawImage(img, x, y, width, height);
-    if (borderRadius)
-        ctx.restore();
-}
-/**
- * 绘制文本,暂时没那么复杂,不用离屏玩
- * @param data
- * @param ctx
- */
-function drawText(data, ctx) {
-    const { x, y, width, height, text, color, fontSize, fontWeight, wordWrap, textAlign } = data;
-    var font = fontSize;
-    font += " Arial"; //字体没有
-    //font-weight:bold;font-style:italic;
-    if (fontWeight)
-        font = fontWeight + " " + font;
-    ctx.font = font;
-    ctx.textBaseline = "top";
-    ctx.fillStyle = color;
-    var widthAll = ctx.measureText(text).width;
-    // console.log(ctx.measureText(text))
-    //超过宽度需要换行,且需要用到居中方式
-    if (wordWrap == "break-word" && widthAll > width) {
-        let realLines = [];
-        let w = ctx.measureText(text[0]).width;
-        let lineStr = text[0];
-        let wordW = 0;
-        let strLen = text.length;
-        for (let j = 1; j < strLen; j++) {
-            wordW = ctx.measureText(text[j]).width;
-            w += wordW;
-            if (w > width) {
-                realLines[realLines.length] = lineStr;
-                lineStr = text[j];
-                w = wordW;
-            }
-            else {
-                lineStr += text[j];
-            }
-        }
-        //最后一行
-        realLines[realLines.length] = lineStr;
-        ctx.textAlign = textAlign || "left";
-        let tx = 0;
-        if (ctx.textAlign == "center") {
-            tx = width * 0.5;
-        }
-        else if (ctx.textAlign == "right") {
-            tx = width;
-        }
-        //有待考虑.现在直接拿高度取平均算每行高度
-        var lineH = height / realLines.length;
-        realLines.forEach((r, i) => {
-            ctx.fillText(r, x + tx, y + i * lineH);
-        });
-    }
-    else {
-        ctx.textAlign = "left";
-        ctx.fillText(text, x, y);
-    }
-}

dist/dom-parser.js

-/**
- * Created by rockyl on 2021/1/11.
- */
-const styleKeys = [
-    'fontSize',
-    'fontFamily',
-    'fontWeight',
-    'textAlign',
-    'color',
-    'wordWrap',
-    'borderRadius',
-];
-export function parseDom(el) {
-    const { left: pX, top: pY, width, height } = el.getBoundingClientRect();
-    let nodes = [];
-    walkNode(el, function (childNode) {
-        let vNode, bound, node;
-        if (childNode.nodeName === 'IMG') { //其他全部认为是文本
-            node = childNode;
-            vNode = {
-                type: 1,
-                src: childNode.src,
-            };
-            bound = childNode.getBoundingClientRect();
-        }
-        else {
-            if (childNode.data) {
-                node = childNode.parentElement;
-                let text = childNode.data.trim();
-                if (text) { //过滤空文本
-                    let range = document.createRange();
-                    range.selectNode(childNode);
-                    bound = range.getBoundingClientRect();
-                    range.detach();
-                    vNode = {
-                        type: 0,
-                        text,
-                    };
-                }
-            }
-        }
-        if (vNode) {
-            const { left, top, width, height } = bound;
-            vNode.x = left - pX;
-            vNode.y = top - pY;
-            vNode.width = width;
-            vNode.height = height;
-            let styles = getStylesWithoutDefaults(node);
-            for (let skey in styles) {
-                if (styleKeys.indexOf(skey) < 0) {
-                    continue;
-                }
-                vNode[skey] = styles[skey];
-            }
-            nodes.push(vNode);
-        }
-    });
-    return {
-        width,
-        height,
-        nodes,
-    };
-}
-function walkNode(root, callback) {
-    callback(root);
-    for (let i = 0, li = root.childNodes.length; i < li; i++) {
-        const childNode = root.childNodes[i];
-        walkNode(childNode, callback);
-    }
-}
-function getStylesWithoutDefaults(element) {
-    let dummy = document.createElement('element-' + (new Date().getTime()));
-    document.body.appendChild(dummy);
-    let defaultStyles = getComputedStyle(dummy);
-    let elementStyles = getComputedStyle(element);
-    let diff = {};
-    for (let key in elementStyles) {
-        if (elementStyles.hasOwnProperty(key)
-            && defaultStyles[key] !== elementStyles[key]) {
-            diff[key] = elementStyles[key];
-        }
-    }
-    dummy.remove();
-    return diff;
-}

dist/index.js

-/**
- * Created by rockyl on 2021/1/11.
- */
-import { parseDom } from "./dom-parser.js";
-import { toCanvas } from "./toCanvas.js";
-let data = parseDom(document.getElementById('poster'));
-console.log(data);
-toCanvas(data, (c) => {
-    document.body.appendChild(c);
-});
-/**
- *
- * @param el html文本
- * @param callback
- */
-export function htmlToCanvas(el, callback) {
-    return toCanvas(parseDom(el), callback);
-}

package.json

 {
 	"name": "html-shot",
 	"version": "1.0.0",
-  "main": "index.js",
+	"main": "dist/index.js",
+	"types": "types/index.d.ts",
 	"license": "MIT",
 	"scripts": {
 		"dev": "tsc -w",

readme.md

+# HTML截图
+实现了HtmlElement的截图功能
+
+## Install
+`yarn add html-shot`  
+or  
+`npm i html-shot`
+
+## Usage
+```js
+const result = await htmlShot(document.getElementById('poster'));
+let img = new Image();
+img.src = result;
+document.body.appendChild(img);
+```
+
+## RenderOptions
+| 名称 | 类型 | 必须 | 默认值 | 说明 |
+| :---- | :---- | :---- | :---- | :---- |
+| `type` | 'canvas' | 'jpeg' | 'png' | 否 | 'png' | 导出类型 |
+| `qaulity` | number | 否 | 0.7 | 导出图片质量 |
+
+## 注意点
+* 仅支持img和text两种元素
+* 不支持transform变换
+* 文本仅只是Arial字体，建议给元素设置为Arial字体

src/dom-parser.ts

@@ -12,7 +12,7 @@ const styleKeys = [
 	'borderRadius',
 ]
 
-export function parseDom(el: HTMLElement) {
+export function parseDom(el: HTMLElement = document.body) {
 	const {left: pX, top: pY, width, height} = el.getBoundingClientRect();
 
 	let nodes = [];

src/index.ts

@@ -2,21 +2,16 @@
  * Created by rockyl on 2021/1/11.
  */
 
-import { parseDom } from "./dom-parser.js";
-import { toCanvas } from "./toCanvas.js";
-
-let data = parseDom(document.getElementById('poster'));
-console.log(data);
-
-toCanvas(data,(c)=>{
-document.body.appendChild(c)
-})
+import {parseDom} from "./dom-parser.js";
+import {RenderOptions, toCanvas} from "./toCanvas.js";
 
 /**
- * 
- * @param el html文本
- * @param callback 
+ * HTML截图
+ * @param {HTMLElement} [el] html节点
+ * @param options 配置
+ * @param {Function} [callback] 回调方法
+ * @return Promise<string|HTMLCanvasElement> 如果是字符串则为图片的base64
  */
-export function htmlToCanvas(el: HTMLElement,callback?:(HTMLCanvasElement)=>void):Promise<HTMLCanvasElement> {
-    return toCanvas(parseDom(el),callback)
+export function htmlShot(el?: HTMLElement, options?: RenderOptions, callback?: (HTMLCanvasElement) => void): Promise<HTMLCanvasElement | string> {
+	return toCanvas(parseDom(el), options, callback)
 }

src/toCanvas.ts

@@ -6,6 +6,7 @@ interface ICData {
 	height: number,
 	nodes: INodeData[]
 }
+
 /**
  * 节点类型
  */
@@ -13,6 +14,7 @@ enum NodeType {
 	TEXT = 0,
 	IMAGE
 }
+
 /**
  * 节点数据
  */
@@ -34,24 +36,34 @@ interface INodeData {
 	wordWrap?: "break-word" | null
 	textAlign?: "center" | "left" | "right"
 }
+
+export interface RenderOptions {
+	type?: 'canvas' | 'jpeg' | 'png',
+	quality?: number,
+}
+
 /**
- * 
+ * 渲染
  * @param data
+ * @param options
  * @param callback
  */
-export async function toCanvas(data: ICData, callback?: (canvas: HTMLCanvasElement) => void): Promise<HTMLCanvasElement> {
-    const { nodes, width, height } = data;
-    var canvas = document.createElement("canvas");
+export async function toCanvas(data: ICData, options: RenderOptions = {}, callback?: (canvas: HTMLCanvasElement) => void): Promise<HTMLCanvasElement | string> {
+	const {type: exportType = 'png', quality = 0.7} = options;
+
+	const {nodes, width, height} = data;
+	let canvas = document.createElement("canvas");
 	canvas.width = width;
 	canvas.height = height;
-    var ctx = canvas.getContext("2d");
+	let ctx = canvas.getContext("2d");
 	//先加载完所有图片
-    var p: Promise<void>[] = [];
+	let p: Promise<void>[] = [];
 	nodes.forEach((n) => {
 		if (n.type !== NodeType.IMAGE) return;
 		p.push(
 			new Promise((r) => {
 				let img = new Image();
+				img.crossOrigin = 'anonymous'
 				img.onload = () => {
 					n.img = img;
 					r()
@@ -71,16 +83,26 @@ export async function toCanvas(data: ICData, callback?: (canvas: HTMLCanvasEleme
 				break
 		}
 	})
-    callback && callback(canvas)
-    return canvas
+
+	let result: any = canvas;
+	switch (exportType) {
+		case 'jpeg':
+		case 'png':
+			result = canvas.toDataURL('image/' + exportType, quality);
+			break;
+	}
+
+	callback && callback(result)
+	return result
 }
+
 /**
  * 绘制图片
  * @param data
  * @param ctx
  */
 function drawImage(data: INodeData, ctx: CanvasRenderingContext2D) {
-    const { x, y, img, width, height, borderRadius } = data;
+	const {x, y, img, width, height, borderRadius} = data;
 	if (borderRadius) {//有圆角,画遮罩,暂时只管一个
 		ctx.save();
 		let max = (width < height ? width : height) / 2;
@@ -111,27 +133,30 @@ function drawImage(data: INodeData, ctx: CanvasRenderingContext2D) {
 	ctx.drawImage(img, x, y, width, height)
 	if (borderRadius) ctx.restore();
 }
+
 /**
  * 绘制文本,暂时没那么复杂,不用离屏玩
  * @param data
  * @param ctx
  */
 function drawText(data: INodeData, ctx: CanvasRenderingContext2D) {
-    const { x, y, width, height,
+	const {
+		x, y, width, height,
 		text,
 		color,
 		fontSize,
 		fontWeight,
 		wordWrap,
-        textAlign } = data;
-    var font = fontSize;
+		textAlign
+	} = data;
+	let font = fontSize;
 	font += " Arial";//字体没有
 	//font-weight:bold;font-style:italic;
 	if (fontWeight) font = fontWeight + " " + font;
 	ctx.font = font;
 	ctx.textBaseline = "top";
 	ctx.fillStyle = color;
-    var widthAll = ctx.measureText(text).width;
+	let widthAll = ctx.measureText(text).width;
 	// console.log(ctx.measureText(text))
 	//超过宽度需要换行,且需要用到居中方式
 	if (wordWrap == "break-word" && widthAll > width) {
@@ -161,7 +186,7 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D) {
 			tx = width;
 		}
 		//有待考虑.现在直接拿高度取平均算每行高度
-        var lineH = height / realLines.length;
+		let lineH = height / realLines.length;
 		realLines.forEach((r, i) => {
 			ctx.fillText(r, x + tx, y + i * lineH)
 		})

test.html

@@ -25,6 +25,7 @@
 		      text-align: center;
 		      width: 1.00rem;
 		      word-wrap: break-word;
+		      font-family: Arial;
       }
 	</style>
 </head>
@@ -36,6 +37,6 @@
 	</p>
 </div>
 
-<script src="dist/index.js" type="module"></script>
+<script src="test.js" type="module"></script>
 </body>
 </html>

test.js

+/**
+ * Created by rockyl on 2021/1/12.
+ */
+
+import {htmlShot} from "./dist/index.js";
+
+(async function () {
+	const result = await htmlShot(undefined, {type: 'png'});
+	let img = new Image();
+	img.src = result;
+	document.body.appendChild(img);
+})();

tsconfig.json

@@ -2,7 +2,13 @@
 	"compilerOptions": {
 		"module": "ES6",
 		"target": "ES2017",
-		"outDir": "dist"
+		"outDir": "dist",
+		"declaration": true,
+		"declarationDir": "types",
+		"lib": [
+			"DOM",
+			"ES2015"
+		]
 	},
 	"include": [
 		"src"

types/dom-parser.d.ts

+/**
+ * Created by rockyl on 2021/1/11.
+ */
+export declare function parseDom(el?: HTMLElement): {
+    width: number;
+    height: number;
+    nodes: any[];
+};

types/index.d.ts

+/**
+ * Created by rockyl on 2021/1/11.
+ */
+import { RenderOptions } from "./toCanvas.js";
+/**
+ * HTML截图
+ * @param {HTMLElement} [el] html节点
+ * @param options 配置
+ * @param {Function} [callback] 回调方法
+ * @return Promise<string|HTMLCanvasElement> 如果是字符串则为图片的base64
+ */
+export declare function htmlShot(el?: HTMLElement, options?: RenderOptions, callback?: (HTMLCanvasElement: any) => void): Promise<HTMLCanvasElement | string>;

types/toCanvas.d.ts

+/**
+ * 转换接口数据
+ */
+interface ICData {
+    width: number;
+    height: number;
+    nodes: INodeData[];
+}
+/**
+ * 节点类型
+ */
+declare enum NodeType {
+    TEXT = 0,
+    IMAGE = 1
+}
+/**
+ * 节点数据
+ */
+interface INodeData {
+    type: NodeType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    src?: string;
+    borderRadius?: string;
+    img?: HTMLImageElement;
+    text?: string;
+    color?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    wordWrap?: "break-word" | null;
+    textAlign?: "center" | "left" | "right";
+}
+export interface RenderOptions {
+    type?: 'canvas' | 'jpeg' | 'png';
+    quality?: number;
+}
+/**
+ * 渲染
+ * @param data
+ * @param options
+ * @param callback
+ */
+export declare function toCanvas(data: ICData, options?: RenderOptions, callback?: (canvas: HTMLCanvasElement) => void): Promise<HTMLCanvasElement | string>;
+export {};