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();
});
核心的逻辑就是
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) {});
2. 使用演示
II. 其他
源码
个人博客: Z+|blog
基于hexo + github pages搭建的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛
声明
尽信书则不如,已上内容,纯属一家之言,因本人能力一般,见识有限,如发现bug或者有更好的建议,随时欢迎批评指正
- 微博地址: 小灰灰Blog
- QQ: 一灰灰/3302797840