canva生成图片1

1. 图片裁剪 2.文字居中

生成图像 代码

<template>
		<canvas :style="`width: ${width}px; height: ${height}px;`" canvas-id="userCanvas" id="userCanvas"></canvas>
</template>

<script>
	export default {
		name: "share-user-canva",
		data() {
			return {
				width: 250,
				height: 200,
				ctx: null,

				tempFilePath: '', //生成的img
			};
		},
		mounted() {
			this.ctx = uni.createCanvasContext('userCanvas', this);
		},
		methods: {
			// 同步获取图片信息
			getImageInfoFun(imageUrl) {
				return new Promise(async (resolve, reject) => {
					await uni.getImageInfo({
						src: imageUrl,
						success: function(image) {
							console.log('image', image)
							resolve(image);
						},
						fail: function(err) {
							console.log('fail', image);
							reject(err)
						}
					});
				})
			},

			// 生成 
			async init(res) {
				console.log('init', res)
				let that = this;

				if (that.tempFilePath != '') {
					return {
						errMsg: "canvasToTempFilePath:ok",
						tempFilePath: that.tempFilePath
					};
				}
				
				uni.showLoading({
					mask:true,
					title: '生成中...'
				});
				
				try{
				
				// 背景底色
				that.ctx.setFillStyle('#fff')
				that.ctx.fillRect(0, 0, that.width, that.height);

				that.ctx.restore()
				
				// 背景图
				const img = await that.getImageInfoFun(res.backimg);
				if (img.errMsg == 'getImageInfo:ok') {
					that.ctx.beginPath()
					that.ctx.drawImage(img.path, 0, 0, that.width, that.height)
				}
				
				// 头像
				const uimg = await that.getImageInfoFun(res.userimg);
				if (img.errMsg == 'getImageInfo:ok') {
					that.ctx.save()
					that.ctx.beginPath()
					
					// 剪切头像圆形
					that.ctx.arc(that.width / 2, 62, 66/2, 0, 2 * Math.PI); 
					that.ctx.setFillStyle('red')
					// that.ctx.fill()
					that.ctx.clip() 
					// 设置头像
					that.ctx.drawImage(uimg.path,that.width / 2-66/2, 29,66, 66)
					that.ctx.restore()
					
					// 头像白色边圈
					that.ctx.beginPath()
					that.ctx.arc(that.width / 2, 62, 66/2, 0, 2 * Math.PI); 
					that.ctx.setStrokeStyle('#fff')
					that.ctx.stroke()
					
				}
				
				that.ctx.save();
				that.ctx.restore()
				
				// 昵称 -- 注意需要判断特殊表情iso无法执行
				that.ctx.setFontSize(19);
				this.ctx.setFillStyle('#333');
				this.ctx.setTextAlign('center'); //文本内容居中
				that.ctx.fillText(res.title, that.width/2, 129)　　　　　　　　　　　　　　　　let w = this.ctx.measureText(res.title).width;//获取文字宽度  ios数字number可以加上 measureText(res.title+'')否则回去失败
				
				// 认证企业
				if(res.attestation){
					that.ctx.setFontSize(12);
					this.ctx.setTextAlign('center');
					this.ctx.setFillStyle('#999')
					that.ctx.fillText('认证企业：'+res.attestation, that.width/2, 157)
				}


				that.ctx.draw();
				
				
				

				return new Promise((resolve, reject) => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'userCanvas',
							success: function(res) {
								// 在H5平台下，tempFilePath 为 base64
								console.log('firstCanvas--', res)
								that.tempFilePath = res.tempFilePath;
								resolve(res);
							},
							fail(err) {
								reject(err)
							},
							complete(){
								uni.hideLoading();
							}
						}, that)
					}, 500)
				});
				
				}catch(e){
					uni.hideLoading();
					console.log('生成失败',e)
				}
			}
		}
	}
</script>

<style lang="scss">

</style

>

 示例图