vue 调用微信分享接口分享截图图片

现在好多应用都需要分享图片等等的需求。大体需要这几个步骤

获取分享图片
将获取图片写入本地文件
调用分享接口分享已经写好的本地图片

因为我这边需要分享的图片实际是在 mui-slider 里面，为了分享的图片清澈（不包含UI）我特意讲Slider 独立出来

实际上就是 这三个 DOM 其中的一个到时候我们会根据 slider 位置选取一个DOM。我们会用到一个 VUE 的一个截图插件

import html2canvas from 'html2canvas';

自行百度如何安装，核心代码就是这块


onShadred(type) { //0好友  1朋友圈Indicator.open({text: '加载中...',spinnerType: 'fading-circle'});// console.log("//0好友  1朋友圈 Type:", type)this.getImageDOM();//获取 要分享的DOM 并且赋值  this.imgDOMhtml2canvas(this.imgDOM).then(canvas => {// 转成图片，生成图片地址//this.imgUrl = canvas.toDataURL("image/jpeg");//console.log("this.imgUrl........_>", this.imgUrl)SaveImage(canvas.toDataURL("image/jpeg"), {onScuess: function (i) {Indicator.close();WechatShare({pictures: [i.target],title: '章鱼世界',extra: {scene: type == 0 ? 'WXSceneSession' : 'WXSceneTimeline'}},function () {this.onShardeScuess()}.bind(this),function (e) {this.onShardeFail(e)}.bind(this))}.bind(this),onFail: function (e) {console.log("保存本地截图失败：", e)Indicator.close();}.bind(this)})});
},

该代码会根据 slider 获取对应的 DOM

         getImageDOM() {let index = this.mui('#slider').slider().getSlideNumber();if (index == 0) {this.imgDOM = this.$refs.imageDom0} else if (index == 1) {this.imgDOM = this.$refs.imageDom1} else if (index == 2) {this.imgDOM = this.$refs.imageDom2} else {this.imgDOM = this.$refs.imageDom0}console.log("index", index)console.log("this.imgDOM", this.imgDOM)},

该js 文件帮助实现一些保存图片和分享图片的功能

//http://www.hcoder.net/tutorials/info_123.html
var shares = null;import {localUser
} from './../baseLocal.js'export {SaveImage,WechatShare
}// 通过系统组件分享
function ShareSystem() {plus.share.sendWithSystem({content: '分享内容',href: 'http://912cc.om'}, function() {console.log('分享成功');}, function(e) {console.log('分享失败：' + JSON.stringify(e));});
}//void obj.send( msg, successCB, errorCB );
function WechatShare(sharecontent, onScuess, onFail) {if (!shares) {plusReady()return}let shareWechat = shares[0] //因为自己的项目只有微信 一种分享渠道 直接 第一个if (!shareWechat) {plus.nativeUI.toast('获取分享服务失败');return;}shareWechat.send(sharecontent, onScuess, onFail)
}function SaveImage(base64, callback) {if (!shares) {plusReady()}let fileName = new Date().getTime()let bitmap   = new plus.nativeObj.Bitmap();// 从本地加载Bitmap图片bitmap.loadBase64Data(base64, function() {console.log('加载图片成功');//bitmap.save("_doc/shareImage/" + (new Date()).getTime() + ".jpg", {bitmap.save("_documents/shareImage/share912_" + fileName + ".jpg", {overwrite: true,quality: 100}, function(i) {console.log('保存图片成功：', i);//保存相册plus.gallery.save("_documents/shareImage/share912_" + fileName + ".jpg", function() {console.log('分享图片保存相册成功');}, function() {console.log('分享图片保存相册失败');});bitmap.clear();if (callback.onScuess) {callback.onScuess(i)}}, function(e) {console.log('保存图片失败：', e);if (callback.onFail) {callback.onFail(e)}});},function(e) {console.log('加载图片失败：', e);if (callback.onFail) {callback.onFail(e)}});
}document.addEventListener('plusready', function() {plusReady();
}, false);function plusReady() {//扩展API加载完毕，现在可以正常调用扩展APIplus.share.getServices(function(s) {shares = s;//console.log("获取分享的服务列表：", shares)}, function(e) {alert("获取分享服务列表失败：" + e.message);});}

2019年 7月17日，使用 html2canvas 截图 https://xxx.png （别的网络资源图片）的时候，出现白屏问题。html2canvas 会有跨域问题：

指定跨域属性

useCORS: true,
allowTaint: false

    onShadred(type) {//0好友  1朋友圈Indicator.open({text: "加载中...",spinnerType: "fading-circle"});this.mui("#actionSheet").popover("toggle");// console.log("this.mui0:", this.mui)// console.log("//0好友  1朋友圈 Type:", type)this.getImageDOM();html2canvas(this.imgDOM, {useCORS: true,allowTaint: false}).then(canvas => {// 转成图片，生成图片地址//this.imgUrl = canvas.toDataURL("image/jpeg");//console.log("this.imgUrl........_>", this.imgUrl)SaveImage(canvas.toDataURL("image/jpeg"), {onScuess: function(i) {Indicator.close();WechatShare({pictures: [i.target],title: "章鱼世界",extra: {scene: type == 0 ? "WXSceneSession" : "WXSceneTimeline"}},function() {this.onShardeScuess();}.bind(this),function(e) {this.onShardeFail(e);}.bind(this));}.bind(this),onFail: function(e) {console.log("保存本地截图失败：", e);Indicator.close();}.bind(this)});});},

vue 调用微信分享接口分享截图图片相关推荐

微信公众号开发自定义分享从前台到Java后台调用微信JS接口分享朋友圈
20180811写在前面的话有很多人遇到问题之后问我,结果大多数是因为配置问题,所以请详细阅读前面的配置步骤. 20181016注意事项收到反馈,之前写的接口即将废弃,源代码中的js接口需要修改, ...
调用微信上传图片接口和下载图片接口
目的:调用微信上传图片接口上传图片,并调用下载图片接口下载到本地 1.绑定域名登录微信公众平台后,进入公众号设置-->公众号设置页面如图(1),点击设置如图(2),输入域名后,点击保存. 注 ...
Qt for Android 调用android原生接口分享图片或文字
在用Qt开发android应用的时候,有一个需求是通过调用android原生接口去实现图片分享功能,原理很简单,首先在java文件中用android接口封装一个分享功能的方法,然后在C++中调用QAn ...
微信JS接口分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置
微信JS接口微信JS接口分享到朋友圈分享给朋友分享到QQ 拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置来源:http://www.cnblogs.com/txw1 ...
前端vue后端java,Vue调用后端java接口的实例代码_亦心_前端开发者
前段时间做了个学校的春萌项目,其中用到先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil ...
Android应用调用微信登录接口
很多App都是需要用户登录的,例如电商类的APP,用户登录后可以查看自己的购物订单,浏览痕迹等,登陆的话又可以分为多种登录,例如QQ,微信,微博,支付宝等,那么接下来这篇文章讲诉的是应用如何调用微信的 ...
微信开发 --- 调用微信上传图片接口,并保存到自己的服务器
微信开发 - 调用微信上传图片接口,并保存到自己的服务器整体思路是这样的: 1.先把手机上的图片上传到微信服务器,然后返回一个图片ID 2.在通过后台根据ID从微信后台拿到流,保存到服务器前几个步 ...
【spring boot】使用RestTemplate调用微信code2Session接口
前言 spring boot 2.1.1.RELEASE 使用RestTemplate调用微信code2Session接口 spring boot中使用RestTemplate,参考这里. 调用方法 ...
调用微信支付接口总结
项目里面用到了微信支付的功能,照着文档学习了一下,这里做个总结来记录.项目用到的是anglusJS来做前端开发,我这边简化了,用的ajax进行异步的调用,然后业务也直接写在了控制层(不过不应该 ...

vue 调用微信分享接口分享截图图片

vue 调用微信分享接口分享截图图片

2019年 7月17日，使用 html2canvas 截图 https://xxx.png （别的网络资源图片）的时候，出现白屏问题。html2canvas 会有跨域问题：

vue 调用微信分享接口分享截图图片相关推荐

最新文章

热门文章

vue 调用微信分享接口 分享截图图片

vue 调用微信分享接口 分享截图图片

2019年 7月17日 ，使用 html2canvas 截图 https://xxx.png （别的网络资源图片） 的时候 ，出现白屏问题。html2canvas 会有跨域问题：

vue 调用微信分享接口 分享截图图片相关推荐

最新文章

热门文章

vue 调用微信分享接口分享截图图片

vue 调用微信分享接口分享截图图片

2019年 7月17日，使用 html2canvas 截图 https://xxx.png （别的网络资源图片）的时候，出现白屏问题。html2canvas 会有跨域问题：

vue 调用微信分享接口分享截图图片相关推荐