简单画布 - 实现截屏当前画布保存至相册+canvas遇坑合集

**

效果图：

**
**

遇坑：

**（1）**问题：画布原生组件权重过高，覆盖了所有东西，引用的pop组件失效；即使使用图片z-index覆盖原生组件：99999也不行
解决：官方cover-view可覆盖原生组件，且注意cover-view内只能包含哪些内容。

**（2）**问题：画布自适应问题：
解决：

let wid;//屏幕宽度自适应
			uni.getSystemInfo({
				success(res) {
					console.log(res.windowWidth);
					wid = res.windowWidth/375;
				}
			});
			//然后需要确定比例，设计图一般都是750的屏幕，这里是375px
			console.log(wid);

**（3）**问题：画布加载不出网络图片！

解决：将网络图片保存为本地图片，再画画布，将图片加载在画布上

async can() {
			this.prohead = await this.getNetworkImage(this.HeadImg);//转换图片
			this.proGoods = await this.getNetworkImage(this.GoodsImg);
			console.log('prohead--' + this.prohead);
			console.log('proGoods--' + this.proGoods);
			await this.canvasOrigin(); //生成画布
		},
		
		//获取网络图片为本地图片，因为画布只接受本地图片
		getNetworkImage(url) {
			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url,
					success: e => {
						const p = e.tempFilePath;
						resolve(p);
					},
					fail: r => {
						reject(r);
					}
				});
			});
		},

**（4）：**display:none隐藏画布失效；overflow：hidden失效；visibility：hidden失效；
解决：position:fixed;left:9000px;让画布超出屏幕范围！！！（虽然觉得这种解决办法很搞笑 ，但是有用啊，醉了）

**

全局代码：

**

<template>
	<view class="content">
		<view :class="{ coverCon: EndImg }"><canvas class="canvasImg" canvas-id="myCanvas"></canvas></view>
		<cover-view v-if="EndImg" @click="closePop()" class="EndImg"><cover-image :src="srcPath" mode="aspectFit"></cover-image></cover-view>
		<button type="default" @click="createCanvasImg()">分享</button>
		<!-- <button type="default" @click="onGetWXACode()">获得二维码</button>
		<view class="list-item" v-if="wxacodeResult">
			<text class="request-text">{{ wxacodeResult }}</text>
			<text class="request-text" v-if="showClearWXACodeCache" @click="ClearWXACodeCache()">清除缓存</text>
			<image :src="wxacodeSrc" mode="aspectFit"></image>
		</view> -->
	</view>
</template>

<script>
// import popCanvasImg from '../../components/uni-popup/uni-popup.vue';
export default {
	components: {
		// popCanvasImg
	},
	data() {
		return {
			srcPath: '',
			wxacodeSrc: '',
			wxacodeResult: '',
			showClearWXACodeCache: false,
			EndImg: false,

			name: 'QQ糖',
			HeadImg: '../../static/service.png',
			GoodsImg: '../../static/goods/6.jpg',
			Qr: '../../static/qr.png'
		};
	},
	onReady() {
		this.canvasOrigin();
	},
	onShow() {
		this.canvasOrigin();
	},
	onLoad() {
		// this.onGetWXACode();
	},
	methods: {
		//点击分享就跳出图片，然后点保存
		closePop() {
			this.EndImg = false;
		},
		//获得微信二维码
		// onGetWXACode() {
		// 	const fileID = wx.getStorageSync('wxacodeCloudID');
		// 	if (fileID) {
		// 		[this.wxacodeSrc, this.wxacodeResult, this.showClearWXACodeCache] = [fileID, `从本地缓存中取得了小程序码的云文件 ID`, true];
		// 		console.log(`从本地缓存中取得了小程序码的云文件 ID：${fileID}`);
		// 	} else {
		// 		wx.cloud.callFunction({
		// 			name: 'openapi',
		// 			data: {
		// 				action: 'getWXACode'
		// 			},
		// 			success: res => {
		// 				console.warn('[云函数] [openapi] wxacode.get 调用成功：', res);
		// 				wx.showToast({
		// 					title: '调用成功'
		// 				});
		// 				[this.wxacodeSrc, this.wxacodeResult, this.showClearWXACodeCache] = [res.result, `云函数获取二维码成功`, true];
		// 				wx.setStorageSync('wxacodeCloudID', res.result);
		// 			},
		// 			fail: err => {
		// 				wx.showToast({
		// 					icon: 'none',
		// 					title: '调用失败'
		// 				});
		// 				console.error('[云函数] [openapi] wxacode.get 调用失败：', err);
		// 			}
		// 		});
		// 	}
		// },
		// ClearWXACodeCache() {
		// 	wx.clearStorage('wxacodeCloudID');
		// },
		//画布内容
		canvasOrigin() {
			let wid;//屏幕宽度自适应
			uni.getSystemInfo({
				success(res) {
					console.log(res.windowWidth);
					wid = res.windowWidth/375;
				}
			});
			//然后需要确定比例，设计图一般都是750的屏幕，这里是375px
			console.log(wid);
			
			const ctx = uni.createCanvasContext('myCanvas');
			//填充首部背景
			ctx.setFillStyle('#f4f4f4');
			// ctx.strokeRect(0, 0, 125, 115); //线框
			// ctx.fillRect(0, 0, 800*this.rpx,900*this.rpx); //填充颜色
			// ctx.restore(); //恢复之前保存的绘图上下文。

			//绘制文本
			ctx.setFillStyle('#121212');
			ctx.setFontSize(15);
			ctx.fillText(this.name, 70 * wid, 30 * wid);
			ctx.setFillStyle('#c3c3c3');
			ctx.setFontSize(12);
			ctx.fillText('在睿分类小程序发布了闲置，快去看看。', 70 * wid, 50 * wid);

			//填充中部背景
			ctx.setFillStyle('#ffffff'); //填充颜色
			ctx.fillRect(20* wid, 80* wid, 300* wid, 350* wid); //填充颜色范围
			// ctx.setGlobalAlpha(0.2)//透明度

			//绘制文本
			ctx.setFillStyle('#adadad');
			ctx.setFontSize(15);
			ctx.fillText('睿分类 -睿杨环境', 50* wid, 380* wid);

			ctx.setFillStyle('#adadad');
			ctx.setFontSize(12);
			ctx.fillText('让投放更便利，监管更完善。', 50* wid, 400* wid);

			// //绘制图片
			ctx.drawImage(this.HeadImg, 10* wid, 10* wid, 50* wid, 50* wid); //头像
			ctx.drawImage(this.GoodsImg, 45* wid, 90* wid, 250* wid, 250* wid); //商品
			ctx.drawImage(this.Qr, 250* wid, 360* wid, 50* wid, 50* wid); //图标
			ctx.fill();
			ctx.draw();
		},
		//生成canvas画布图片
		createCanvasImg() {
			let _this = this;
			//画布里的内容必须是通过画布js写进去的？不然打印不出来
			// 把当前画布指定区域的内容导出生成指定大小的图片。 在 draw() 回调里调用该方法才能保证图片导出成功。
			uni.canvasToTempFilePath({
				x: 0,
				y: 0,
				canvasId: 'myCanvas',
				success: function(res) {
					// 在H5平台下，tempFilePath 为 base64
					_this.srcPath = res.tempFilePath;
					console.log(res.tempFilePath);
					_this.EndImg = true;
					// _this.openPop(); //打开模态框
				}
			});
		}
	}
};
</script>

<style>
.content {
	background: #fafafa;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
.coverCon {
	background: #a6a6a6;
	opacity: 0.1;
}
.canvasImg {
	z-index: 1;
	position: absolute;
	top: 10%;
	left: 0;
	width: 90%;
	margin: 5%;
	height: 70%;
	/* background: #e2e2e2; */
	/* visibility: hidden; 控制隐藏画布 */
}
.EndImg {
	z-index: 999;
	width: 70%;
	height: 60%;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #e6e6e6;
	transform: translate(-50%, -50%);
}
</style>