技术博客-5 jsPlumb缩略图的生成
在查找缩略图生成的相关资料时，发现了两个比较有用的插件：html2canvas和canvas2image。顾名思义，前者是将html对象转换为canvas画布，而后者则是将canvas导出为不同格式的image图像。
由此，就得到了实现缩略图生成的方法：先使用html2canvas将选定的div转化为canvas，再使用canvas2image将canvas转化为图片形式保存到后端数据库中。保存成了图片的形式以后，前端的排版就好处理了。不过实际上canvas元素自带了一个toDataURL()方法，可以直接将canvas转换为可以直接保存到数据库中的base64图像，不需要第二个插件就能完成所需功能。
然而，理想很丰满，现实很骨感。在实现中遇到了两个难以解决的bug：
缩略图生成不全
原因：选定div的height过大，html2canvas默认截图当前显示的内容，屏幕之外未被显示的内容则不会被截进canvas中，自然也就不会生成到缩略图中。
解决方法：参考博客1和博客2，先将滚动条移动到顶，然后克隆一份备份的节点，对克隆的节点进行截图。代码如下：
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
//美观考虑，去除jsplumb元素选中效果
$("#" + window.sessionStorage.getItem("active_node")).removeClass("selected");
//暂时去除画布边框
$("#canvas").find("#border").attr("style","height:1000px;border:0px");
//获取节点高度，后面为克隆节点设置高度。
var height = $("#canvas").height()
//克隆节点，默认为false，不复制方法属性，为true是全部复制。
var cloneDom = $("#canvas").clone(true);
//设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
cloneDom.css({
"background-color": "white",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": height
});
$("body").append(cloneDom);
cloneDom.attr("id", "canvas1");
这样做有一个小小的副作用：运行时会在页面左上角“闪现”一下备份的画布节点（这个实现方法不允许隐藏这个备用节点），同时边框也会闪一下。
效果图：
之后就要解决jsplumb箭头不显示的问题了。
箭头不显示
箭头不显示的原因，是因为jsPlumb把其他元素都转化成了div，唯独把箭头转化成了不能用html2canvas处理的svg矢量图。为此，需要专门对svg进行处理。这里用到了另一个插件canvg，具体代码如下：
if (typeof html2canvas !== 'undefined') {
//以下是对svg的处理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = $("#canvas1").find('svg');//divReport为需要截取成图片的dom的id
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML.trim();
var canvas = document.createElement('canvas');
canvg(canvas, svg);
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
}
最终生成的图片效果如下，可以看到箭头也可以正常地进行显示了：
html2canvas的异步处理问题
到这里，缩略图的生成已经解决了，但还遇到了一个问题：如何将缩略图通过ajax上传。但这里还踩了一个异步函数的大坑：
在原来的程序中，首先使用get_network()函数获取当前的模型并加工成JSON数据，本来打算在这里加入截图函数canvas_gen()，然后将得到的dataURL作为JSON的一个属性一并上传，但这里遇到一个问题：html2canvas是异步执行，如果用同步的方式执行canvas_gen()，get_network()返回的JSON属性一定是undefined。上网查找了控制函数异步执行顺序的一些方式，但都没找到很好的解决方式。于是改在canvas_gen()中html2canvas的回调函数里执行get_network()，虽然不是很漂亮的解决方式，但至少能够正确地将缩略图作为一个属性，插入到JSON数据中了。代码如下：
var dataURL;
html2canvas(document.querySelector("#canvas1"),{
//Whether to allow cross-origin images to taint the canvas
allowTaint: true,
//Whether to test each image if it taints the canvas before drawing them
taintTest: false,
}
).then(canvas => {
$("#canvas1").remove();
document.body.appendChild(canvas);
$("canvas").attr("id", "cvs");
var cvs = document.getElementById("cvs");
dataURL = cvs.toDataURL();
//Canvas2Image.saveAsImage(canvas, 760, 1000, 'png');
$("#canvas").find("#border").attr("style","height:1000px;border:0.5px solid black");
$("canvas").remove();
var data = get_network();
data["graph"] = dataURL;
//上一版本中的save_network
//如果可能的话，希望使用异步回调更漂亮地解决
save_network_origin(data);
});
这里save_network_origin(data)函数中有ajax的POST操作，这样至少可以保证这几个异步函数确实是按照期望的顺序执行的。
