uni-app,关于 canvas 在 app,小程序, h5中,实现绘制,保存本地图片

没有套路,没有难读的文档,直接看代码

html部分

<template>
	
		
		<canvas type="2d" id="myCanvas" />
	
	
	
		
		<canvas canvas-id="myCanvas" id="myCanvas">canvas>
	
	
	<button @click="drawCanvas">绘制canvasbutton>
	<button @click="preservation">保存到本地button>
template>

js部分

<script>
	export default {
		data() {
			return {
				textCanvas: null,		// 初始化 canvas 值
			}
		},
		methods: {
			// 绘制canvas
			drawCanvas() {
				// 指定this的指向
				let that = this;
				// uni-app 中,不管是小程序,app,h5 在获取元素实例时,都是统一的方法,只要获取元素的宽高
				uni.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
				.exec((res) => {
					// #ifdef MP-WEIXIN
						// 获取设备设备像素比
						const dpr = uni.getSystemInfoSync().pixelRatio;
						// 微信小程序绘制
						let textCanvas = that.textCanvas = res[0].node;			// 获取元素实例
						textCanvas.width = res[0].width * dpr;					// 设置canvas像素宽
						textCanvas.height = res[0].height * dpr;				// 设置canvas像素高
						let textCtx = textCanvas.getContext('2d');				// 创建二维绘图
						textCtx.clearRect(0, 0, res[0].width, res[0].height);	// 设置画布大小
						textCtx.beginPath();									// 创建一条新的路劲
						textCtx.scale(dpr, dpr);								// 设置x,y缩放(这里作用不大,,没效果)
						
						// 这里开始绘制canvas内容,绘制的过程当中,不知道是小程序的问题,还是什么问题在绘制有背景图片的内容时,
						// 文字内容必须要延迟绘制,也就是要定时器延迟一定时间才能绘制,要不然就会将文字覆盖在图片下方。
						// 图片的绘制
						const tx = textCanvas.createImage();
						tx.src = "../../..";									// 线上地址或者本地地址都可以
						tx.onload = () => {
							textCtx.drawImage(tx, 20, 20, 100, 100);			// 参数从左到右说明, 图片文件,x轴开始位置,y轴开始位置,x轴结束位置,y轴结束位置
						};
						// 文字设置
						textCtx.fillStyle = "#3085FC";							// 文字颜色
						textCtx.font = "14px sans-serif";						// 字体样式 设置加粗("normal bold 16px sans-serif");
						textCtx.fillText("内容", 160, 45);				        // 设置文字内容, x轴位置,y轴位置

						// 设置分割线
						textCtx.moveTo(10, 130);								// 设置线条开始位置x,y
						textCtx.lineTo(res[0].width - 10, 130);					// 设置线条结束位置x,y
						textCtx.lineWidth = 1;									// 设置线条粗细
						textCtx.strokeStyle = "#e7e7e7";						// 设置线条颜色
						textCtx.stroke();										// 重点,不写线条不显示
						// ... // 其他设置自己查文档很简单
					// #endif
					// #ifdef APP-PLUS || H5
						// app 和 h5 的设置方式是一样的
						let tcx = uni.createCanvasContext('myCanvas');			// 通过canvasId 创建画布
						// 设置图片,如果是背景图,就通过获取的实例,获取到他的宽高直接使用
						tcx.drawImage('../../../static/imgage/abc.png', 0, 0, res[0].width, res[0].height);
						// 文字和分割线设置和小程序无异
						tcx.draw();												// 将设置的内容绘制出来,不写不显示
					// #endif
				})
			},
			// 保存canvas 到本地
			preservation() {
				// 指定 this 指向
				let that = this;
				// #ifdef MP-WEIXIN
					// 在微信中保存canvas为图片到本地,要通过canvas 实例的参数进行设置
					wx.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: that.textCanvas.width,							// 设置画布宽度
						height: that.textCanvas.height,							// 设置画布高度
						destWidth: that.textCanvas.width,						// 屏幕width像素密度设置
						destHeight: that.textCanvas.height,						// 屏幕height像素密度设置
						canvas:  that.textCanvas,								// 这里是重点,获取实例的时候保存为全局变量就行了
						// 这里使用的 textCanvas 在 vue2 中定义在data中没有问题,但是在vue3中,使用响应式时一定要注意定义的变量不要使用响应式定义,微信小程序会一直报错,直接使用 let textCanvas 定义
						complete(res) {
							// res.tempFilePath 返回的是临时地址 png 或者 jpg
							wx.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success() {
									uni.showToast({
										title: "保存成功",
										icon: "success"
									})
								},
								fail() {
									uni.showToast({
										title: "保存失败",
										icon: "error"
									})
								}
							});
						}
					})
				// #endif
				// #ifdef APP-PLUS || H5
					// app 和 h5 获取元素的方式都相同
					uni.canvasToTempFilePath({
						canvasId: "myCanvas",
						complete(res) {
							// #ifdef APP-PLUS
								// 在 app 中, 图片地址直接返回的值 临时地址  png 或 jpg,直接使用uni的方法
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success() {
										uni.showToast({
											title: "保存成功",
											icon: "success"
										});
									},
									fail() {
										uni.showToast({
											title: "保存失败",
											icon: "error"
										})
									}
								})
							// #endif
							// #ifdef H5
								// 在 h5 中,res.tempFilePath 返回的是 base64 类型要处理,通过 a 标签的形式下载
								var arr = res.tempFilePath.split(',');
								var bytes = atob(arr[1]);
								let ab = new ArrayBuffer(bytes.length);
								let ia = new Uint8Array(ab);
								for (let i = 0; i < bytes.length; i++) {
									ia[i] = bytes.charCodeAt(i);
								}
								var blob = new Blob([ab], { type: 'application/octet-stream' });
								var url = URL.createObjectURL(blob);
								var a = document.createElement('a');
								a.href = url;
								a.download = new Date().valueOf() + ".png";
								var e = document.createEvent('MouseEvents');
								e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
								a.dispatchEvent(e);
								URL.revokeObjectURL(url);							
							// #endif
						}
					})
			}
		}
	}
</script>

你可能感兴趣的:(H5,vue.js,uni-app,小程序,uni-app,前端)