Golang网页渲染保存成图片
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Golang网页渲染保存成图片相关的知识,希望对你有一定的参考价值。
参考技术A 1、数据组装:将图层的数据和变量参数合成,得到该图的图层数据。2、图层生成:目前有三种图层(后续会有更多种类),文字图层:根据图层数据(字体,字号,自重,颜色)生成文字图层。图片图层:会对图片进行本地缓存,如果已有缓存,则从缓存读取,否则从网络获取。然后根据图层数据(透明度,圆角)生成图片图层。二维码图层:使用二维码生成工具,将url转换成二维码图片图层。
3、图层合成:将图片图层和文字图层按顺序叠加,最后生成一张图片返回。另外,利用Serverless部署Golang服务,使用Serverless利用它自动扩缩容的优点,提高服务性能,以及优化成本。
通过按钮截取当前网页成png或jpeg格式的图片并保存
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"/>
<script type="text/javascript" src="html2canvas.js"/>
</head>
<body>
<a id="down_load_hidden" target="blank" style="display: none;"></a>
<a id="down_button" href="javascript:void(0)" onclick="domShot(‘qqCont‘)">保存当前页</a>
<div id="qqCont" class="qqCont">
需要截图的样式
</div>
<script>
/**
* 调用html2canvas框架进行截图下载功能
* @param domId 容器Id
* author Levin
*/
function domShot(domId) {
//0.5.0-beta4方法
html2canvas(document.querySelector("#" + domId), {
allowTaint: true,
height: $("#" + domId).outerHeight() + 20
}).then(function (canvas) {
var timestamp = Date.parse(new Date());
$(‘#down_button‘).attr(‘href‘, canvas.toDataURL());
$(‘#down_button‘).attr(‘download‘, timestamp + ‘.png‘);
var fileObj = document.getElementById("down_load_hidden");
fileObj.click();
});
}
</script>
//一般情况html2canvas.js中的截取部分不支持取全部截取 所以要将页面所有部分截取得 修改html2canvas.js中的一下部分
//未修改前
<script>
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
</script>
//修改后
<script>
//添加自定设置宽度高度
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
* *
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
</script>
</body>
</html>
以上是关于Golang网页渲染保存成图片的主要内容,如果未能解决你的问题,请参考以下文章