作用dpr

src/dom-parser.ts

@@ -60,15 +60,15 @@ export function parseDom(el: HTMLElement = document.body) {
 
 				break;
 		}
-		if(!bound && childNode.getBoundingClientRect){
+		if (!bound && childNode.getBoundingClientRect) {
 			bound = childNode.getBoundingClientRect();
 		}
 
 		let styles = getStylesWithoutDefaults(node || childNode);
 
 		if (!isText) {
-			for(let skey of commonStyleKeys){
-				if(commonStyleKeys.indexOf(skey) < 0){
+			for (let skey of commonStyleKeys) {
+				if (commonStyleKeys.indexOf(skey) < 0) {
 					continue
 				}
 

src/toCanvas.ts

@@ -41,6 +41,7 @@ interface INodeData {
 }
 
 export interface RenderOptions {
+	scale?: number,
 	type?: 'canvas' | 'jpeg' | 'png',
 	quality?: number,
 }
@@ -53,9 +54,13 @@ export interface RenderOptions {
  * @return 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 {nodes, width, height} = data;
+	width *= scale;
+	height *= scale;
 
-    const { nodes, width, height } = data;
 	let canvas = document.createElement("canvas");
 	canvas.width = width;
 	canvas.height = height;
@@ -81,10 +86,10 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 		switch (n.type) {
 			case NodeType.IMAGE:
 			case NodeType.CANVAS:
-                drawImage(n, ctx)
+				drawImage(n, ctx, scale)
 				break
 			case NodeType.TEXT:
-                drawText(n, ctx)
+				drawText(n, ctx, scale)
 				break
 		}
 	})
@@ -105,13 +110,20 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
  * 绘制图片
  * @param data
  * @param ctx
+ * @param scale
  */
-function drawImage(data: INodeData, ctx: CanvasRenderingContext2D) {
-    const { x, y, img, width, height, borderRadius } = data;
+function drawImage(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
+	let {x, y, img, width, height, borderRadius: borderRadiusTxt} = data;
+	x *= scale;
+	y *= scale;
+	width *= scale;
+	height *= scale;
+	let borderRadius = parseFloat(borderRadiusTxt) * scale;
+
 	if (borderRadius) {//有圆角,画遮罩,暂时只管一个
 		ctx.save();
 		let max = (width < height ? width : height) / 2;
-        let radius = Math.min(+borderRadius.replace("px", ""), max);
+		let radius = Math.min(borderRadius, max);
 		// ctx.beginPath();
 		// ctx.moveTo(x, y + radius);
 		// ctx.quadraticCurveTo(x, y, x + radius, y);
@@ -143,19 +155,27 @@ function drawImage(data: INodeData, ctx: CanvasRenderingContext2D) {
  * 绘制文本,暂时没那么复杂,不用离屏玩
  * @param data
  * @param ctx
+ * @param scale
  */
-function drawText(data: INodeData, ctx: CanvasRenderingContext2D) {
-    const {
+function drawText(data: INodeData, ctx: CanvasRenderingContext2D, scale: number) {
+	let {
 		x, y, width, height,
 		text,
 		color,
-        fontSize,
+		fontSize: fontSizeTxt,
 		fontWeight,
 		fontStyle,
 		wordWrap,
 		textAlign
 	} = data;
-    let font = fontSize;
+
+	x *= scale;
+	y *= scale;
+	width *= scale;
+	height *= scale;
+	let fontSize = parseFloat(fontSizeTxt) * scale;
+
+	let font = fontSize + 'px';
 	font += " Arial";//字体没有
 	//font-weight:bold;font-style:italic;
 	if (fontWeight) font = fontWeight + " " + font;

test.html

@@ -40,10 +40,11 @@
 	<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/>bcde<span style="background-color: rgba(0,255,0,0.5);">span</span>fghij
+		a<br/>bcdefghij
 	</p>
 </div>
-
+<!--
+<span style="background-color: rgba(0,255,0,0.5);">span</span>-->
 <script>
 	let canvas = document.getElementById('canvas');
 	let context = canvas.getContext('2d');

types/toCanvas.d.ts

@@ -36,6 +36,7 @@ interface INodeData {
     fontStyle?: "normal" | "italic" | "oblique";
 }
 export interface RenderOptions {
+    scale?: number;
     type?: 'canvas' | 'jpeg' | 'png';
     quality?: number;
 }