I. 说明

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

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

1. 实现

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

基本实现原理:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$("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();
});

2. 使用演示

demo

II. 其他

个人博客: Z+|blog

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

声明

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

扫描关注

QrCode