h5+(mui) 截图分享微信

1.引入必要文件

<script type="text/javascript" src="../js/html2canvas.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>

2.html

 <!--右上角弹出菜单--><div id="topPopover" class="mui-popover mui-ex"><div class="mui-popover-arrow"></div><div class="mui-scroll-wrapper"><div class="mui-scroll"><ul class="mui-table-view"><li @tap="analysis()" class="mui-table-view-cell mui-media "><span class="mui-media-object"><svg class="icon2" aria-hidden="true"><use xlink:href="#icon-zhuxingtu"></use></svg></span><span class="mui-media-body">可视化报表</span></li><li @tap="shareY(1)" class="mui-table-view-cell mui-media "><span class="mui-media-object"><svg class="icon2" aria-hidden="true"><use xlink:href="#icon-iconkuozhan_fenxiangpre"></use></svg></span><span class="mui-media-body">筛选数据分享</span></li></ul></div></div></div>

3.在methods里面写入逻辑

shareY(T) {$(".mui-ex").hide();plus.nativeUI.showWaiting("正在生成图片...");if (T == 1) {var cntElem = document.getElementById('load');} else {var cntElem = document.getElementById('loadOnly');}var shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象var width = shareContent.offsetWidth; //获取dom 宽度var height = shareContent.offsetHeight; //获取dom 高度var canvas = document.createElement("canvas"); //创建一个canvas节点var scale = 2; //定义任意放大倍数 支持小数canvas.width = width * scale; //定义canvas 宽度 * 缩放canvas.height = height * scale; //定义canvas高度 *缩放canvas.getContext("2d").scale(scale, scale); //获取context,设置scale var opts = {scale: scale, // 添加的scale 参数canvas: canvas, //自定义 canvas// logging: true, //日志开关，便于查看html2canvas的内部执行流程width: width, //dom 原始宽度height: height,useCORS: true // 【重要】开启跨域配置};html2canvas(shareContent, opts).then(function(canvas) {// H5 plus事件处理var context = canvas.getContext('2d');// 【重要】关闭抗锯齿context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;var dataUrl = canvas.toDataURL("image/jpeg");var bitmap = new plus.nativeObj.Bitmap();var result = new Date().getTime();var filename = result + "_picture" + ".jpeg";bitmap.loadBase64Data(dataUrl);bitmap.save("_doc/" + filename, {overwrite: true},function(i) {//保存到系统相册plus.gallery.save(i.target,function(d) {//销毁Bitmap图片bitmap.clear();//console.log("保存图片到相册成功");},function() {//console.log("保存保存失败");});},function() {bitmap.clear();});plus.nativeUI.closeWaiting();var path = "file://" + plus.io.convertLocalFileSystemURL("_doc/" + filename);shareImage(path); //传入参数调用微信分享接口})var shares = null;var sweixin = null;var buttons = [{title: '我的好友',extra: {scene: 'WXSceneSession'}},{title: '朋友圈',extra: {scene: 'WXSceneTimeline'}},{title: '我的收藏',extra: {scene: 'WXSceneFavorite'}}];// H5 plus事件处理function plusReady() {updateSerivces();}if (window.plus) {plusReady();} else {document.addEventListener('plusready', plusReady, false);}/*** 更新分享服务*/function updateSerivces() {plus.share.getServices(function(s) {shares = {};for (var i in s) {var t = s[i];shares[t.id] = t;}sweixin = shares['weixin'];}, function(e) {console('获取分享服务列表失败：' + e.message);});}// 分享图片function shareImage(path) {var msg = {type: 'image'};msg.pictures = [path];//console.log(msg.pictures)sweixin ? plus.nativeUI.actionSheet({title: '分享图片到微信',cancel: '取消',buttons: buttons}, function(e) {(e.index > 0) && share(sweixin, msg, buttons[e.index - 1]);}) : plus.nativeUI.alert('当前环境不支持微信分享操作!');}// 分享function share(srv, msg, button) {if (!srv) {//console('无效的分享服务！');return;}button && (msg.extra = button.extra);// 发送分享if (srv.authenticated) {//console('---已授权---');doShare(srv, msg);} else {//console('---未授权---');srv.authorize(function() {doShare(srv, msg);}, function(e) {//console('认证授权失败：' + JSON.stringify(e));});}}// 发送分享function doShare(srv, msg) {//console(JSON.stringify(msg));srv.send(msg, function() {//console('分享到"' + srv.description + '"成功！');}, function(e) {//console('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));});}},

4.要点

4.1相对路径转绝对路径

plus.io.convertLocalFileSystemURL("_doc/" + filename);

4.2 Base64转bitmap保存到手机

var bitmap = new plus.nativeObj.Bitmap();bitmap.loadBase64Data(dataUrl);

4.3 完整路径文件一定要加 "file://"

var path = "file://" + plus.io.convertLocalFileSystemURL("_doc/" + filename);

5.整个开发流程

5.1 微信开放平台申请应用的AppID，AppSecret，填入应用配置里

同时注意Bundle ID，包名，应用签名都要与配置文件manifest.json里面的匹配

5.2应用签名生成步骤，对应的参数是manifest.json里面的 keystore

创建安卓应用签名

h5+(mui) 截图分享微信相关推荐

微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)
第三方配置就不说了,按着官方文档来就可以了第一个坑在进行接口鉴权时需要签名等参数,签名等参数需要调用后端接口返回.需要注意的是:调用接口需要一个参数就是页面路径地址(url参数,我这边页面路径用u ...
h5分享微信 QQ——Hbuilder app
H5 分享微信 QQ 因为客户项目需要做分享微信和QQ进行投票,自己学习了一下,在网上查了好多大神写的代码,自己总结了一下. 开始真机模拟测试的时候,分享微信和QQ都是没有问题的,后面打包app使用的 ...
小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程
通过本文教程可以实现将H5手机网站直接封装成微信小程序,并且支持分享功能.但不支持微信支付功能. 说明:手机站域名必须开启https模式第一步: 微信开发者工具中创建小程序,填写你自己的小程序App ...
Android移动开发之【Android实战项目】DAY11-App实现截图分享qq，微信
前言现在很多应用都有截图分享的功能,今天就来讲讲截图分享吧今天涉及到以下内容: Android截屏 Android分享效果图展示 ok,下面就来具体讲讲一.权限,注意权限先在自己的mainf ...
Android实现截图分享qq，微信
代码地址如下: http://www.demodashi.com/demo/13292.html 前言现在很多应用都有截图分享的功能,今天就来讲讲截图分享吧今天涉及到以下内容: 1. androi ...
Vue+H5 活动内容调用微信分享
遇到很多坑记录一下先看一遍微信的官方手册 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 代码实现步 ...
h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
H5手机QQ分享到手Q、QQ空间、微信好友、朋友圈础通用接口
H5手Q分享通用接口代码片段 <meta itemprop="name" content="网页标题"> <meta itemprop=&qu ...
极光会客厅：大型H5游戏如何登陆微信小游戏及游戏性能优化分享
上周末,由极光网络主办的首期"极光会客厅"正式开门迎客.在本次的"2D小游戏开发实战技术沙龙"上,极光网络客户端主程陈策以及极光网络项目总监陈源向一众与会者分享 ...

h5+(mui) 截图分享微信

1.引入必要文件

2.html

3.在methods里面写入逻辑

4.要点

4.1相对路径转绝对路径

4.2 Base64转bitmap保存到手机

4.3 完整路径文件一定要加 "file://"

5.整个开发流程

5.1 微信开放平台申请应用的AppID，AppSecret，填入应用配置里

5.2应用签名生成步骤，对应的参数是manifest.json里面的 keystore

创建安卓应用签名

h5+(mui) 截图分享微信相关推荐

最新文章

热门文章

h5+(mui) 截图分享微信

1.引入必要文件

2.html

3.在methods里面写入逻辑

4.要点

4.1相对路径转绝对路径

4.2 Base64转bitmap保存到手机

4.3 完整路径文件一定要加 "file://"

5.整个开发流程

5.1 微信开放平台 申请 应用的AppID，AppSecret，填入应用配置里

5.2应用签名生成步骤，对应的参数是manifest.json里面的 keystore

创建安卓应用签名

h5+(mui) 截图分享微信相关推荐

最新文章

热门文章

5.1 微信开放平台申请应用的AppID，AppSecret，填入应用配置里