前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传的服务器上去)。我这个主要就解决这个批量的人力的优化。好,废话不多说了。直接上逻辑和代码。'
这个问题的解决方案:html to canvas to png.
目前有一个这样的插件: html2canvas,
- html2canvas($targetElem, {
- useCORS: true,
- onrendered: function(canvas) {
- }
- });
这个'$targetElem'就是那个要转换的 html, useCORS 用来设置图片是否跨域(如 html 图片域名和当前网站不是同一个域名,需要设置这个属性), onrendered 是转换完成后执行的方法。
里面有一种情况需要考虑:如果 html 标签里有 svg 标签, 目前 htm2canvas 不支持 svg 标签。
这个情况下就需要先把 svg 处理成 html2canvas 能处理标签。
我这策略是 svg 转换成 canvas ,html2canvas 转换完成,再回复 svg。这里我还需要这个插件 canvg(svg 转 canvas)
具体代码如下
- var nodesToRecover = [];
- var nodesToRemove = [];
- var $svgElem = $targetElem.find('svg');
- $svgElem.each(function(index, node) {
- var parentNode = node.parentNode;
- var canvas = document.createElement('canvas');
- canvg(canvas, parentNode, {
- ignoreMouse: true,
- ignoreAnimation: true
- });
- //将svg转换成canvas
- nodesToRecover.push({
- parent: parentNode,
- child: node
- });
- parentNode.removeChild(node);
- nodesToRemove.push({
- parent: parentNode,
- child: canvas
- });
- parentNode.appendChild(canvas);
- });
- html2canvas($targetElem, {
- useCORS: true,
- onrendered: function(canvas) {
- var base64Image = canvas.toDataURL('image/png').substring(22);
- //回复svg
- nodesToRemove.forEach(function(pair) {
- pair.parent.removeChild(pair.child);
- });
- nodesToRecover.forEach(function(pair) {
- pair.parent.appendChild(pair.child);
- });
- })
这个方案,我已经完全实现了,并在我们项目里使用了。 欢迎大家使用,如果有什么问题,可以留言给我。
最后希望大家如果觉得好,给个推荐。
来源: