Chrome插件之DomToImage实现

文章目录

I. 说明
1. 1. 实现
2. 2. 使用演示
II. 其他

I. 说明

有些时候，看到一些网页的信息时，想分享给小伙伴，一般直接用截图工具来做，但是当分享的内容比较长时，截图就比较蛋疼了，所以想着做了这么个插件

可以将网页中任意一个dom结构，渲染为图片

1. 实现

主要借助开源包: dom-to-image来实现

基本实现原理：

在网页中插入一段html代码，然后绑定上点击事件，核心逻辑如下

$("body").append('<div id="rendFloatDom" class="NYwishes">'
		+ '<div id="expandInputBtn" class="send"><div class="send-btn" style="float:right"><a onclick="document.getElementById(\'expandInputBtn\').style.display=\'none\';document.getElementById(\'showRenderImgDiv\').style.display=\'block\';">展开</a></div></div>'
		+ '<div class="send" id="showRenderImgDiv" style="display:none">'
		+ '<div class="input"><input id="choose-id" name="content" type="text" placeholder="cid: | id: + 标签" ></div>'
		+ '<div class="send-btn" ><a id="RenderImgBtn">渲染</a></div></div></div>'
		+ '');

function doRender() {
	var chooseVal = document.getElementById('choose-id').value;
	var node;
	if(chooseVal.startsWith('cid:')) {
		chooseVal = chooseVal.substring(4);
		node = document.getElementsByClassName(chooseVal)[0];
	} else {
		if(chooseVal.startsWith("id:")) {
			chooseVal = chooseVal.substring(3);
		}

		if ("" == chooseVal) {
			return;
		}

		node = document.getElementById(chooseVal);
	}

	if(node == null || typeof(node) == undefined) {
		alert("没有选中的dom结构");
		return;
	}

	domtoimage.toPng(node)
		.then(function (dataUrl) {
				var url = dataUrl;
				window.open().document.write('<html><head><title>渲染图</title></head><body><div style=\'text-align:center\'><a download="out.png" href="' + url + '"><img src="' + url + '" /></a></div></body></html>');
		})
		.catch(function (error) {});
}

$("#choose-id").keydown(function(e) {
   if (e.keyCode == 13) {
     	doRender();
   }
});

$('#RenderImgBtn').click(function() {
		doRender();
});