2021-09-14

uniapp canvas 绘制海报

<template>
	<view class="demo">
		<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas01"> </canvas>
		<button class="btn" type="primary" v-if="isShow" @click="saveImage">保存图片到相册</button>
	</view>
</template>
<script>
	export default {		
		data() {
			return {
				canvasW:0, // 画布宽
				canvasH:0, // 画布高
				SystemInfo:{}, // 设备信息
				goodsImg: {}, // 商品主图信息
				ewmImg:{}, // 二维码图片信息
				ewmW:120, // 二维码大小
				title:'Apple/苹果 iPhone 11全新正品国行全网通4G智能手机苹果SE2', // 商品标题
				price:'4158.00', // 价格
				Oldprice:'4999.00', // 原价
				name:'浪迹天涯', // 推荐人
				isShow:false ,
			}
		},
		async onLoad() {
			// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
			this.SystemInfo = await this.getSystemInfo();
			
			// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
			let goodsImgUrl = '/static/bjt.jpg'  // 主图本地路径，也可以用网络地址
			let ewmImgUrl = '/static/2wm.jpg'  
			this.goodsImg = await this.getImageInfo(goodsImgUrl);
			this.ewmImg = await this.getImageInfo(ewmImgUrl);

			this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
			this.canvasH = this.SystemInfo.windowHeight - 60; //this.goodsImg.height + this.ewmW + 10;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
			
			// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
			if(this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this.SystemInfo.errMsg == 'getSystemInfo:ok'){
				console.log('读取图片信息成功')
				uni.showToast({
					icon:'loading',
					mask:true,
					duration:10000,
					title: '海报绘制中',
				});
				setTimeout(()=>{
					var ctx = uni.createCanvasContext('myCanvas', this);
					// 1.填充背景色，白色
					ctx.setFillStyle('#fff'); // 默认白色
					ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
					
					// 2.绘制商品主图，二维码
					ctx.drawImage(goodsImgUrl, 0, 0, this.canvasW, this.canvasW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
					ctx.drawImage(ewmImgUrl, this.canvasW-130, this.canvasW+10, this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
					
					// 3.绘制商品标题，多余文字自动换行
					ctx.setFontSize(16); // setFontSize() 设置字体字号
					ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
					
					/* str 这段代码是我百度找的，参考别人的。canvas不能自动换行，需要自行计算 */
					let _strlineW = 0;
					let _strLastIndex = 0; //每次开始截取的字符串的索引
					let _strHeight = this.canvasW +30; //绘制字体距离canvas顶部的初始高度
					let _num = 1;
					for (let i = 0; i < this.title.length; i++) {
						_strlineW += ctx.measureText(this.title[i]).width;
						if (_strlineW > this.canvasW-155) {
							if(_num == 2 && 2){
								//文字换行数量大于二进行省略号处理
								ctx.fillText(this.title.substring(_strLastIndex, i-5)+'...', 10, _strHeight);
								_strlineW = 0;
								_strLastIndex = i;
								_num++;
								break;
							}else{
								ctx.fillText(this.title.substring(_strLastIndex, i), 10, _strHeight);
								_strlineW = 0;
								_strHeight += 20;
								_strLastIndex = i;
								_num++;
							}
						}else if (i == this.title.length - 1) {
							ctx.fillText(this.title.substring(_strLastIndex, i + 1), 10, _strHeight);
							_strlineW = 0;
						}
					}
					
					
					// 4、商品价格
					ctx.setFontSize(16) // 字号
					ctx.setFillStyle('#e31d1a') // 颜色
					ctx.fillText('￥'+this.price, 10, this.canvasW +75); // （文字，x，y）
					ctx.setFontSize(12)
					ctx.setFillStyle('#b8b8b8')
					ctx.fillText('原价￥'+this.Oldprice, 100, this.canvasW +75);
					
					// 5、邀请信息
					ctx.setFontSize(16)
					ctx.setFillStyle('#333')
					ctx.fillText(this.name+'推荐给你', 10, this.canvasW +100);
					
					ctx.setFontSize(14)
					ctx.setFillStyle('#b8b8b8')
					ctx.fillText('长按或扫描识别二维码', 10, this.canvasW +this.ewmW);

					// draw方法 把以上内容画到 canvas 中
					ctx.draw(true,(ret)=>{						 
						this.isShow = true  // 显示按钮-保存图片到相册
						uni.showToast({
							icon:'success',
							mask:true,
							title: '绘制完成',
						});
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'myCanvas',
							quality: 1,
							complete: function(res) {
								// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
								console.log(res.tempFilePath)								
								uni.setStorageSync('filePath',res.tempFilePath)  //保存临时文件路径到缓存
							} ,
						})
					});
				},1500)
				
			} else {
				console.log('读取图片信息失败')
			}
		},
		
		methods: {
			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			
			// 获取设备信息
			getSystemInfo(){
				return new Promise((req, rej) => {
					uni.getSystemInfo({
					    success: function (res) {
					        req(res)
					    }
					});
				})
			},
			
			// 保存图片到相册
			saveImage() {
				let filePath = uni.getStorageSync('filePath')	//从缓存中读取临时文件路径			
				wx.saveImageToPhotosAlbum({
					filePath: filePath,
					success(res) {
						uni.showToast({
							icon:'success',
							mask:true,
							title: '保存到相册了',
						});
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			}
			
		}
	}
</script>

<style>
	.btn{
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		width: 94%;
	}
	
</style>

效果图