js实现截图保存图片功能的代码示例
前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做（用截图工具在指定区域截图，然后保存到本地，再上传的服务器上去）。我这个主要就解决这个批量的人力的优化。好，废话不多说了。直接上逻辑和代码。'
这个问题的解决方案：htmltocanvastopng.目前有一个这样的插件: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）
具体代码如下
varnodesToRecover=[];
varnodesToRemove=[];
var$svgElem=$targetElem.find('svg');
$svgElem.each(function(index,node){
varparentNode=node.parentNode;
varcanvas=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){
varbase64Image=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);
});
})
这个方案，我已经完全实现了，并在我们项目里使用了。欢迎大家使用，如果有什么问题，可以留言给我。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。