现在有很多在微信里流行的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

浏览器h5新建文件 保存到本地(相当于浏览器写文件)

function doSave(value, type, name) {         var blob;         if (typeof window.Blob == "funct ...

【转】Python微信好友头像拼接图

转自:Python微信好友头像拼接图 今天在朋友圈看到有人发了微信好友拼接图,心里满是新奇,看了下评论才知道用Python写的.心里痒痒,立马就安装了下Python. 安装好了之后,看了下大神的代码, ...

最短路 spfa 算法 && 链式前向星存图

推荐博客  https://i.cnblogs.com/EditPosts.aspx?opt=1 http://blog.csdn.net/mcdonnell_douglas/article/deta ...

POJ-1511 Invitation Cards---Dijkstra+队列优化+前向星正向反向存图

题目链接: https://vjudge.net/problem/POJ-1511 题目大意: 给定节点数n,和边数m,边是单向边. 问从1节点出发到2,3,...n 这些节点路程和从从这些节点回来到 ...

存图方式---邻接表&邻接矩阵&前向星

基于vector存图 struct Edge { int u, v, w; Edge(){} Edge(int u, int v, int w):u(u), v(v), w(w){} }; vecto ...

.NET Core之微信支付之公众号、H5支付篇

前言 本篇主要记录微信支付中公众号及H5支付全过程. 准备篇 公众号或者服务号(并开通微信支付功能).商户平台中开通JSAPI支付.H5支付. 配置篇 公众号或者服务号中 -------开发----- ...

纯Java实现微信朋友圈分享图

纯Java实现微信朋友圈分享图 1.实现分享图的效果 2.开发环境 2.1 JDK * oracle's jdk 1.8以上 2.2 字体 * 若选择了微软雅黑字体又是代码部署到Linux,则需要安装 ...

HDU 1535 SPFA 前向星存图优化

Invitation Cards Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

POJ 1985.Cow Marathon-树的直径-树的直径模板(BFS、DFS(vector存图)、DFS(前向星存图))

Cow Marathon Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 7536   Accepted: 3559 Case ...

随机推荐

Java学习笔记-多线程-创建线程的方式

创建线程 创建线程的方式: 继承java.lang.Thread 实现java.lang.Runnable接口 所有的线程对象都是Thead及其子类的实例 每个线程完成一定的任务,其实就是一段顺序执行 ...

c++函数内部声明函数，在函数外面实现函数是可以的

这个具体有什么用我也不大清楚,只知道可以这样 #include //#include "header1.h" using namespace st ...

MVC 应用免受 CSRF攻击

保护ASP.NET 应用免受 CSRF 攻击   CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack ...

CSS揭秘—透明边框(一)

前言: 所有实例均来自,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

【干货】利用MVC5+EF6搭建博客系统(二)测试添加数据、集成Autofac依赖注入

PS:如果图片模糊,鼠标右击复制图片网址,然后在浏览器中打开即可. 一.测试仓储层.业务层是否能实现对数据库表的操作 1.在52MVCBlog.IRepository程序集下创建IsysUserInf ...

BIO & NIO & NIO常见框架

BIO & NIO BIO - Blocking IO - 同步式阻塞式IO --- UDP/TCP NIO - New  IO - 同步式非阻塞式IO AIO  - Asynchronous ...

PS小技巧之完美抠图

具体详细步骤如下01.打开图片,ctrl+j复制一层得到图层1,点击红圈处新建图层2,放于图层1与背景层之间,填充你喜欢的颜色,作为检查效果和新的背景图层. 02.点击图层1,用“快速选择工具”大致做 ...

配置java环境变量后没有生效的解决办法

参考文章:https://blog.csdn.net/tooky_poom/article/details/60768458 系统安装了jdk1.7,环境变量正常,但是安装jdk1.8后,修改环境变量 ...

React创建组件的三种方式比较

推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...