微信H5页面生成图片并长按下载

首先需要一JS插件 html2canvas 下载地址：http://html2canvas.hertzen.com/

引入html2canvas.min.jsj


$(".btnCard").click(function(){$('#index,#answer').hide(); //为了显示图片这里隐藏了其它元素html2canvas(document.getElementById('complete')).then(function(canvas){$("#complete").hide(); //隐藏其它元素var img = new Image;img.src = canvas.toDataURL('image/png');$('.down').append(img);});
});

HTML代码部分：

<style>.down img{width:100%;}</style><div id="index">.......</div>
<div id="complete">.......</div>
<div class="down"></div>

html2canvas会将指定的元素内容生成一个canvas，可以是body,也可以是某个div根据你的需求来设置就可以了。然后将canvas显示到img标签中，在微信中如果不放到img标签中，canvas长按是没有效果的。注意在使用html2canvas时有可能在运行的时候页面有可能会错位，而导致生成的图片和原显示效果不一致。

我就遇到了这样的问题，所以我将页面前面没有用的dom都给隐藏掉，然后再去调用 html2canvas来生成图片。

经测试Androd 没有问题 MI9 微信7.0.6 可正常使用。IOS 12.4 微信7.0.5 可正常使用。

微信H5页面生成图片并长按下载相关推荐

H5 -- 微信h5页面中下载第三方app的方法
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
android 打开h5文件下载,微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码...
需求:微信h5页面下载app -- 安卓直接下载apk文件包,IOS跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不 ...
微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码
需求:微信h5页面下载app -- 安卓直接下载apk文件包,IOS跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不 ...
堆米微信H5页面怎么制作？易企秀微信H5页面制作，微信简历制作，
现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广 ...
h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
微信html5展示页,H5科普|微信H5页面的展示形式
原标题:H5科普|微信H5页面的展示形式随着移动互联网的不断发展,越来越多的企业开始运用微信H5来营销推广,微信H5凭借着方便快捷.页面丰富的优势,已经成为了如今最受欢迎的微信营销方式.一款微信H5 ...
h5微信本地调试 vue_VUE开发微信H5页面总结
写在前面刚入门前端的时候写过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫.现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录.防止自己以后再去解决解决过的问题. ...
微信h5页面实现人脸注册和登陆
工作中总会遇到一些麻烦的问题,有问题不要怕解决就好了,前段时间要实现微信h5页面人脸注册/登录,本以为很简单的一个东西,没想到居然这么麻烦,写个文章记录下过程和遇到的问题及解决办法: 需求:①人脸注册 ...
意派Epub360 | 制作微信H5页面的流程思路引导
H5页面其实就是一种可交互的网页,除非要在其中设置微信授权(此举是为了获取用户的微信昵称及头像信息),否则也是可以直接在浏览器中在线浏览的,既方便又不占内存.一般来说,制作H5页面的流程基本有:确认项 ...

微信H5页面生成图片并长按下载

微信H5页面生成图片并长按下载相关推荐

最新文章

热门文章