Chrome插件之DomToImage实现网页dom结构渲染输出图片

I. 说明

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

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

1. 实现

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

基本实现原理：

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

$("body").append('
'
		+ '
展开
'
		+ '
'
		+ '
'
		+ '
渲染
'
		+ '');

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('
'">'" />
');
		})
		.catch(function (error) {});
}

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

$('#RenderImgBtn').click(function() {
		doRender();
});
复制代码

核心的逻辑就是

domtoimage.toPng(node)
    .then(function (dataUrl) {
		var url = dataUrl;
		// 打开新的页面，显示图片
		window.open().document.write(''
		+ '
'
		+ ''">'" />
');
    }).catch(function (error) {});
复制代码

2. 使用演示

II. 其他

源码地址

Chrome-ImgRender

个人博客： Z+|blog

基于hexo + github pages搭建的个人博客，记录所有学习和工作中的博文，欢迎大家前去逛逛

声明

尽信书则不如，已上内容，纯属一家之言，因本人能力一般，见识有限，如发现bug或者有更好的建议，随时欢迎批评指正

• 微博地址: 小灰灰Blog
• QQ： 一灰灰/3302797840

扫描关注