无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

微信小程序游戏制作_js完成截图保存图片功用的

时间:2021-01-12 14:03来源:微信小程序游戏制作 作者:jianzhan 点击:
js完成截屏储存照片作用的编码实例 前几日企业新项目里有那样一个要求,把网页页面的某一一部分可以一键截屏。这一作用实际上便是对人力资源的一个提升,假如是人为因素做
js实现截图保存图片功能的代码示例       本篇文章主要介绍了js实现截图功能的代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传的服务器上去)。我这个主要就解决这个批量的人力的优化。好,废话不多说了。直接上逻辑和代码。'

这个问题的解决方案: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);

这个方案,我已经完全实现了,并在我们项目里使用了。欢迎大家使用,如果有什么问题,可以留言给我。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信