Html2canvas - 微信中长按存图 - 将h5活动结果保存到本地

 现在有很多在微信里流行的h5活动页。这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答案。比如这个就是最后那张结果图:

当时自己做的时候,网上搜不到一个系统完整的做法讲解。这里整理一下。

### 实现微信h5保存网页为图片

虽然基本上活动都是有事先固定好的答案,但是每个用户生成的结果还是不一样的。尤其有的需求还有用户的昵称之类。

所以,就要动态生成web网页为图片了,然后用户长按这张图片,调取微信的长按存图功能就行了。

这里只记录最后生成截图并保存的做法

一般做法是,用户选择完毕生成结果后,要有一个事件比如click提前触发,让html2canvas赶紧画图:

具体html2canvas的使用和配置,以及bug填坑之类请看这一篇:[JS - 基于html2canvas实现 网页截图(+下载截图) 功能](https://www.cnblogs.com/padding1015/p/8947062.html)

这里我直接调用基于html2canvas封装好的html2img方法:

1. html2canvas生成截图

```js

html2img({
  targetEleId: oCanvas,
  imgType: 'png',
  titleStr: '描述语'
},false)

```

然后获取截图的base64码,作为图片的src,将新创造的img元素放进body中,

```js

.then((imgUrl)=>{
  let oImg = document.createElement('img');
  oImg.id = 'oImg';
  oImg.className = 'o-img';
  oImg.src= imgUrl;//imgUrl是html2canvas返回的截图的base64码
  document.body.appendChild(oImg);//将生成的截图放到页面中
});

```

2. 长按截图(核心)- 调取微信的保存图片到手机功能。

普通需求下,

既然微信是按谁存谁,按哪张图存哪张图,那把需要存的图盖到最上边,让其成为用户可以按到的唯一一张图,不就可以了?

所以将这张要保存的图片的层级调到最高,盖到所有元素的上边,就可以实现用户长按图片弹出保存功能

但有时候会遇到某些需求 - 事实上市面上很多h5也实现了这个效果:)

要求最后保存到手机的图和用户当前看的最后一张结果图不是一个!!!

一开始我都想哭。

我怎么长按这个图存另一张啊,微信的长按存图又没接口给我改图片的url。

后来想,让盖在上边的图不可视不就好了?一张看不见的图盖在结果上边,虽然用户看到的是结果图,但是存下来的就是另一张当时隐身的截图。

狸猫换太子!

问题又来了:微信能否长按一张看不见、但是存在于dom结构中的图,也调起存图功能呢?

经过提心吊胆地测试后得出结论:长按不可视的图片也可以调起微信的长按存图功能。哈哈!

所以最后的处理是:最后要保存的图盖在最上边, 要让其看不见,就设置透明度 opacity即可。

```css

.o-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 20;
}

```

 2018-08-14  16:32:00

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

微信小程序填坑-Android真机环境下的bluebird.js

今天,有朋友反映说,我的微信小程序的例子在andriod真机环境下运行出错,研究调试了半天,发现原来是使用的bluebird.js(Promise实现库)导致的...

8830
来自专栏有趣的django

python爬虫入门(五)Selenium模拟用户操作

爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider) 之间恢宏壮阔的斗争... 小莫想要某站上所有的电影,写了...

72030
来自专栏华仔的技术笔记

Xcode 7 自动测试XCTestCase

44970
来自专栏菩提树下的杨过

诡异的【session丢失】和【<img src="">标签】

     项目发布到服务器上面了,但是客户在使用的时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息...

28650
来自专栏搞前端的李蚊子

微信小程序模板消息详解

先放代码 wxml: <form name='pushMsgFm' report-submit bindsubmit='orderSign'> <vi...

68590
来自专栏数据小魔方

这个包绝对值得你用心体验一次!

这一段时间在研究R里面的数据抓取相关包,时不时的能发掘出一些惊喜。 比如今天,我找到了一个自带请求器的解析包,而且还是嵌入的pantomjs无头浏览器,这样就不...

31960
来自专栏HT

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 Web...

26870
来自专栏iOS122-移动混合开发研究院

写给iOS小白的MVVM教程(序)

这几天,需要重构下部分代码,这里简要记录下.但是涉及的技术要点还是很多,所以分为多个篇章叙述.此教程来源于,并将于应用于实践,不做过多的概念性阐释和争论.每个篇...

214100
来自专栏游戏杂谈

H5小游戏的坑点小结

1) iOS 9.1 的safari中,在onTouchBegan方法中调用cc.audioEngine.playEffect播放音效是没有效果的,如果在onT...

21110
来自专栏地方网络工作室的专栏

Python3 初学实践案例(7)tkinter 入门 GUI 的密码生成程序

Python3 初学实践案例(7)tkinter 入门 GUI 的密码生成程序 前面我已经非常好的完成了 cli 的密码生成程序的编写 http://blog....

33780

扫码关注云+社区

领取腾讯云代金券