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.imgDOM
    html2canvas(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加载完毕，现在可以正常调用扩展API
	plus.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)
        });
      });
    },