html2canvas如何指定不同的div
0
悬赏园豆：5
[已解决问题]
解决于 2018-08-06 14:57
使用html2canvas将对应的div截成了图片，长按后即可保存。
但保存下来的图片跟展示给用户的有区别，展示的下方没二维码，保存后的图片有二维码。
尝试过将二维码隐藏，但发现隐藏的内容html2canvas是截不到的。设置成透明一样不行。
有什么方法能实现展示和最终保存不同的效果吗？
最佳答案
0
首先你要明白页面截图的原理
复杂的就不说了 一般页面主要是通过svg生成图片然后由canvas转化成base64图片格式的，
你说因此的内容看不见 是因为他就是看不见的 你只需要把整个element深度复制一份，放在一个用户看不到的地方，屏幕外，然后截一下，之后再remove掉复制的， 就行了 如果是一些特殊类型 svg无法解析的，也是无法成功的，比如说 本来就包含了svg的不分， 或者第三方资源，还有canvas等特殊标签， 就需要看情况转换了
收获园豆：5
补充一下， 复制的部分把要截图的东西全部显示出来，反正用户看不到，截完就删掉好了。
@blurs: 谢谢你的详细回答。不过还是弄不懂什么叫深度复制，以及放在屏幕外？能详细说明下吗。
@Tomdwannn: 额 就是element的克隆 一个属性，创建出一个一模一样的结构对象， 然后 屏幕外。 就是指类似于 left: -100%; 这种情况
比如说 原生的有 document.body.cloneNode(true) 意思是深度克隆body结构 创建出一个一样的element
@blurs: 我试了下，没克隆，就弄了个div margin-left 到屏幕外，一样没法截取呀。空白的 截出来
@Tomdwannn: 全部显示了吗？ 你的原话里貌似说过有部分隐藏所以有空白的地方
@blurs: 一个div margin-left到了屏幕外，html2canvas是无法截到的。这玩意只能截取当前页面可视的东西。
@Tomdwannn: 额。。 margin-left 可不可以我不知道 一般人也不会用这个来移动位置。。。
有外网吗？ 或者直接贴代码 我看看
要显示 要满足的条件有
1.全部为可视状态 指的是css可视属性 不是说屏幕
2.不包含第三方资源内容
3.不包含svg无法识别的特殊标签。
visibility: hidden; 那就是这个嘛。
@Tomdwannn: ... 我的意思是 你把所有的你要截图的东西全部display：black出来，show出来。
然后再截图
@blurs: 你的意思是，开始隐藏，点击生成图片的时候 将隐藏的显示并截图 对吗
@Tomdwannn: 可以的话就这样做。 这也是为什么我会叫你去克隆一份出来的原因呀 还有 别陷入误区了 html2canvas是接收一个elment值来截图的 不是说一定要存在
@blurs: 那我明白了，所以克隆出的东西只是element并不是真正一个呈现出来的东西，直接把element放进去就可以截了对吗？
@Tomdwannn: 是的 但是要注意 复制出来的不用给客户看到，所以你可以吧隐藏的部分全部显示，在进行截图 就行了 不过最好还是放在页面里 你可以定个全局定位 用 left飘出屏幕 因为我没试过直接放不再tree里的element...
https://www.cnblogs.com/yanweidie/p/5203943.html 这里是api 要注意一些地方
- 不支持iframe
- 不支持跨域图片
- 不能在浏览器插件中使用
- 部分浏览器上不支持SVG图片
- 不支持Flash
- 不支持古代浏览器和IE，
@Tomdwannn: 当时我也是写一个截图 不过麻烦多了 里面有多种svg标签和第三方资源加载在里面 我复制出一个全部替换了在截图才搞定的
@blurs:能加你Q不。
