首页新闻找找看学习计划

html2canvas如何指定不同的div

0
悬赏园豆:5 [已解决问题] 解决于 2018-08-06 14:57

使用html2canvas将对应的div截成了图片,长按后即可保存。

但保存下来的图片跟展示给用户的有区别,展示的下方没二维码,保存后的图片有二维码。

尝试过将二维码隐藏,但发现隐藏的内容html2canvas是截不到的。设置成透明一样不行。

有什么方法能实现展示和最终保存不同的效果吗?

Tomdwannn的主页 Tomdwannn | 初学一级 | 园豆:114
提问于:2018-02-08 09:45
< >
分享
最佳答案
0

首先你要明白页面截图的原理

复杂的就不说了 一般页面主要是通过svg生成图片然后由canvas转化成base64图片格式的,

你说因此的内容看不见  是因为他就是看不见的  你只需要把整个element深度复制一份,放在一个用户看不到的地方,屏幕外,然后截一下,之后再remove掉复制的,  就行了  如果是一些特殊类型 svg无法解析的,也是无法成功的,比如说 本来就包含了svg的不分, 或者第三方资源,还有canvas等特殊标签, 就需要看情况转换了

收获园豆:5
blurs | 小虾三级 |园豆:659 | 2018-02-08 11:18

补充一下, 复制的部分把要截图的东西全部显示出来,反正用户看不到,截完就删掉好了。

blurs | 园豆:659 (小虾三级) | 2018-02-08 11:19

@blurs: 谢谢你的详细回答。不过还是弄不懂什么叫深度复制,以及放在屏幕外?能详细说明下吗。

Tomdwannn | 园豆:114 (初学一级) | 2018-02-08 14:12

@Tomdwannn: 额  就是element的克隆  一个属性,创建出一个一模一样的结构对象, 然后  屏幕外。 就是指类似于 left: -100%; 这种情况

blurs | 园豆:659 (小虾三级) | 2018-02-08 14:16

比如说  原生的有 document.body.cloneNode(true)  意思是深度克隆body结构 创建出一个一样的element  

blurs | 园豆:659 (小虾三级) | 2018-02-08 14:17

@blurs: 我试了下,没克隆,就弄了个div margin-left 到屏幕外,一样没法截取呀。空白的 截出来

Tomdwannn | 园豆:114 (初学一级) | 2018-02-08 14:27

@Tomdwannn: 全部显示了吗?   你的原话里貌似说过有部分隐藏所以有空白的地方

blurs | 园豆:659 (小虾三级) | 2018-02-08 14:36

@blurs: 一个div margin-left到了屏幕外,html2canvas是无法截到的。这玩意只能截取当前页面可视的东西。

Tomdwannn | 园豆:114 (初学一级) | 2018-02-08 14:38

@Tomdwannn: 额。。 margin-left 可不可以我不知道 一般人也不会用这个来移动位置。。。

有外网吗?  或者直接贴代码 我看看

  

要显示 要满足的条件有

1.全部为可视状态  指的是css可视属性 不是说屏幕

2.不包含第三方资源内容

3.不包含svg无法识别的特殊标签。

blurs | 园豆:659 (小虾三级) | 2018-02-08 14:42

visibility: hidden; 那就是这个嘛。

Tomdwannn | 园豆:114 (初学一级) | 2018-02-08 14:48

@Tomdwannn: ... 我的意思是  你把所有的你要截图的东西全部display:black出来,show出来。

然后再截图 

blurs | 园豆:659 (小虾三级) | 2018-02-08 14:50

@blurs: 你的意思是,开始隐藏,点击生成图片的时候 将隐藏的显示并截图 对吗

Tomdwannn | 园豆:114 (初学一级) | 2018-02-08 15:06

@Tomdwannn: 可以的话就这样做。  这也是为什么我会叫你去克隆一份出来的原因呀  还有 别陷入误区了  html2canvas是接收一个elment值来截图的  不是说一定要存在

blurs | 园豆:659 (小虾三级) | 2018-02-08 15:08

@blurs: 那我明白了,所以克隆出的东西只是element并不是真正一个呈现出来的东西,直接把element放进去就可以截了对吗?

Tomdwannn | 园豆:114 (初学一级) | 2018-02-08 15:12

@Tomdwannn: 是的  但是要注意  复制出来的不用给客户看到,所以你可以吧隐藏的部分全部显示,在进行截图  就行了  不过最好还是放在页面里  你可以定个全局定位  用 left飘出屏幕  因为我没试过直接放不再tree里的element...  

https://www.cnblogs.com/yanweidie/p/5203943.html 这里是api  要注意一些地方

  • 不支持iframe
  • 不支持跨域图片
  • 不能在浏览器插件中使用
  • 部分浏览器上不支持SVG图片
  • 不支持Flash
  • 不支持古代浏览器和IE,
blurs | 园豆:659 (小虾三级) | 2018-02-08 15:17

@Tomdwannn: 当时我也是写一个截图 不过麻烦多了 里面有多种svg标签和第三方资源加载在里面  我复制出一个全部替换了在截图才搞定的

blurs | 园豆:659 (小虾三级) | 2018-02-08 15:18

@blurs:能加你Q不。

Tomdwannn | 园豆:114 (初学一级) | 2018-02-08 16:11
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册