参考链接：https://developers.weixin.qq.com/community/develop/article/doc/000a60125f4cc85356b8bf2bd5bc13
https://www.jianshu.com/p/7dd6b068c233
<canvas class="can" style="height: 100vh;" canvas-id="shareCanvas"></canvas>
<button @click="myshare">分享</button>
``
methods: {
//封装得到图片信息的方法
getImageinfo(src) {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: src,
success(data) {
resolve(data)
},
fail(info) {
reject(info)
}
})
})
},
// 因为没有对应后端的接口，这里使用的是从本地得到的图片
getImg() {
return new Promise((resolve, reject) => {
uni.chooseImage({
success: function(res) {
resolve(res.tempFilePaths[0])
},
fail: function(info) {
reject(info)
}
})
})
},
// 保存图片，这方法不严谨。更好地保存方法，请参考[https://developers.weixin.qq.com/community/develop/article/doc/000a60125f4cc85356b8bf2bd5bc13](https://developers.weixin.qq.com/community/develop/article/doc/000a60125f4cc85356b8bf2bd5bc13)
saveImage(file) {
const _this = this
uni.showLoading({
title: "保存中",
})
uni.saveImageToPhotosAlbum({
filePath: file,
success() {
uni.showToast({
title: "保存成功",
icon: "none"
})
},
complete() {
uni.hideLoading()
}
})
},
// 分享
async myshare() {
const _this = this
uni.showLoading({
title: "图片正在加载中",
mask: true
})
_this.isShare = true //在data里定义isShare属性
const img1 = await _this.getImageinfo(await _this.getImg())
const img2 = await _this.getImageinfo(await _this.getImg())
const img3 = await _this.getImageinfo(await _this.getImg())
// console.log(img1, img2)
Promise.all([
img1,
img2,
img3
]).then(res => {
console.log(res)
const ctx = uni.createCanvasContext("shareCanvas")
//头部信息
let avatarurl_width = 60, //绘制的头像宽度
avatarurl_heigth = 60, //绘制的头像高度
avatarurl_x = 0, //绘制的头像在画布上的位置
avatarurl_y = 0 //绘制的头像在画布上的位置
// 背景图片--start
//背景颜色
ctx.rect(0, 0, 600, 600)
ctx.setFillStyle('yellow')
ctx.fill()
// ctx.drawImage(res[0].path, 0, 0, 375, 600)
// 背景图片--end
ctx.save()
ctx.beginPath()
// 画圆+填充图片--start
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI *
2, false);
ctx.clip();
ctx.drawImage(res[1].path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
// 画圆+填充图片--end
ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
ctx.font = 'normal normal 30px sans-serif';
ctx.setFontSize(12) //字体大小
ctx.setFillStyle('#ffffff')
ctx.fillText('我的名字',70, 30);
// /头部文字 长按识别二维码进入可打开小程序 进入点免费创建 让你图片带着名片飞出去
ctx.setTextAlign('center') //字体居中
ctx.setFillStyle('#333333') //字体颜色
ctx.setFontSize(12) //字体大小
ctx.fillText('长按识别二维码进入可打开小程序', 375 / 2, 40 - 0.5)
ctx.fillText('进入点免费创建 让你图片带着名片飞', 375 / 2, 72 - 0.5)
// 中间图片
ctx.drawImage(res[2].path, 100, 100, 100, 100)
ctx.setFillStyle('#ffffff')
ctx.fillText('扫描二维码', 375 / 2, 540 - 0.5)
ctx.fillText('和我一起赚钱', 375 / 2, 570 - 0.5)
//第三个图片
ctx.drawImage(res[1].path, 100, 200, 100, 100)
ctx.draw(false, function() {
uni.canvasToTempFilePath({
x: 0,
y: 0,
// width: 375,
// height: 600,
// destWidth: uni.getSystemInfoSync().windowWidth, //防止图片模糊
// destHeight: uni.getSystemInfoSync().windowHeight,
canvasId: 'shareCanvas',
success(res) {
uni.hideLoading()
_this.isShare = false
uni.previewImage({
urls: [res.tempFilePath],
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail(err) {
console.log(err.errMsg)
}
}
})
// _this.saveImage(res.tempFilePath)
}
})
}, 500)
})
},
}
问题：
解决：在微信公众平台上进行相应得配置，将图片所在的域名（这里是微信头像）配置在downloadFile中，否则无法获取相应图像的信息
