参考链接: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中,否则无法获取相应图像的信息
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐