uin-app 使用canvas画简易海报

1 canvas画圆角并把图片放进去

uni.downloadFile({
				    url:that.user.url,//图片为网络图片必须要下载到本地获取到图片的临时路径
				    success: function (res) {
						uni.getImageInfo({ //获取图片的真实宽高
							src: res.tempFilePath,
							success: function (image) {
								
								let bi = image.width / image.height;//获取图片的宽高比例
								context.save()
								context.beginPath()
								// context.arc(94 * that.bili, 94 * that.bili, 64 * that.bili, 0, 2 * Math.PI)
								// context.setFillStyle('blue')
								// context.fill()
								// context.clip()
								
								// ·············画圆角 
								// x 画圆角的容器距画布左上角的x轴距离
								//y  画圆角的容器距画布左上角的y轴距离
								//w  画圆角的容器的宽度
								//y  画圆角的容器的高度
								//r  圆角的半径
								let x=30*that.bili,y=30*that.bili,w= 128 * that.bili,h=128 * that.bili,r=10 * that.bili
								
								
								
								 // 左上角
								 context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
								 
								 // border-top
								 context.moveTo(x + r, y)
								 context.lineTo(x + w - r, y)
								 context.lineTo(x + w, y + r)
								 
								  // 右上角
								 context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
								 
								 // border-right
								 context.lineTo(x + w, y + h - r)
								 context.lineTo(x + w - r, y + h)
								 // 右下角
								 context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
								 
								 // border-bottom
								 context.lineTo(x + r, y + h)
								 context.lineTo(x, y + h - r)
								 // 左下角
								 context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
								 
								 // border-left
								 context.lineTo(x, y + r)
								 context.lineTo(x + r, y)
								 
								 // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
								 context.fill()
								 // context.stroke()
								 context.closePath()
								 
								context.clip()
								// context.setFillStyle('blue')
								// context.fillRect(30 * that.bili,30 * that.bili, 300, 300);
								// context.restore()
								// ········································
								
								context.drawImage(res.tempFilePath, 30 * that.bili, (94 * that.bili - 128 * that.bili / bi / 2 ),128 * that.bili , 128 * that.bili / bi)
								context.restore()
								context.draw()
								
								
							}
						})
					}
				})

2 把画布保存为图片

// x: 0,
								// y: 0,
								// width:  702*that.bili,
								// height:  788*that.bili,
								// destWidth: 702*that.bili,
								// destHeight: 788*that.bil,
								// 加上上面这些图片保存下来没有图片只有文字和背景色
								// 保存图片时把上面这些去掉即可他会按照你画布的尺寸吧图片保存下来
								uni.canvasToTempFilePath({
								
								  canvasId: 'mycanvas',
								  fileType:'jpg',
								  success: function(res) {
									that.src = res.tempFilePath
								  } 
								})

全部代码

<template>
	<view>
		<view class="top content">
			<view class="flex">
				<view>
					<image v-if="user" :src="user.url" mode="aspectFill" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;">
					</image>
				</view>
				<view v-if="user" class="flex" style="margin-left: 20rpx;">
					<view style="font-size: 36rpx;font-weight: bold;">{{user.merchantname}}</view>
					<view class="user_type">
						{{user.code > 1 ? (user.code == 2 ? '商家' : '企业') : '个人'}}
					</view>
				</view>
				<view v-else class="flex">
					<view style="font-size: 36rpx;font-weight: bold;">未登录</view>
					<view class="user_type">
						游客
					</view>
				</view>
			</view>
			<image src="../../static/logo/fen.png" class="erwri"  mode="aspectFill"></image>
		</view>
		
		<canvas canvas-id="mycanvas" style="width: 702rpx; height: 788rpx;margin: 0 auto;position: fixed;top: 0;right: -1000px;"></canvas>
		<view class="flex">
			<view @click="baocun" class="fen_an">
				<image  src="../../static/logo/fen.png" mode="aspectFill"></image>
				<view>保存到本地</view>
			</view>
		</view>
		<!-- <image :src="src" mode="widthFix" style="width: 100%;"></image> -->
	</view>
</template>

<script>
	import {
		myhomepagecode
	} from '@/api/my.js'
	export default {
		data() {
			return {
				info: {},
				user:{},
				bili:0,
				src:'',
			}
		},
		onLoad() {
			// this.login();
			this.bili = uni.getSystemInfoSync().windowWidth / 750;
			this.user = uni.getStorageSync('user');
			
		},
		 onReady: function (e) {
			    let that = this;
		        var context = uni.createCanvasContext('mycanvas');
				context.setFillStyle('#FFFFFF')
				context.fillRect(0,0, 702*that.bili,  788*that.bili);
				context.beginPath();
				context.setFillStyle('#000000') //文字颜色：默认黑色
				context.font = 'normal bold 20px STXingkai'; // 字体
				context.setFontSize(36 * that.bili) //设置字体大小，默认10
				context.fillText(that.user.merchantname,178 * this.bili,94 * this.bili);//文字内容、x坐标，y坐标
				context.drawImage("../../static/logo/fen.png", 61 * that.bili, 178 * that.bili,580 * that.bili , 580 * that.bili)
				
				uni.downloadFile({
				    url:that.user.url,//图片为网络图片必须要下载到本地获取到图片的临时路径
				    success: function (res) {
						uni.getImageInfo({ //获取图片的真实宽高
							src: res.tempFilePath,
							success: function (image) {
								
								let bi = image.width / image.height;//获取图片的宽高比例
								context.save()
								context.beginPath()
								// context.arc(94 * that.bili, 94 * that.bili, 64 * that.bili, 0, 2 * Math.PI)
								// context.setFillStyle('blue')
								// context.fill()
								// context.clip()
								
								// ·············画圆角 
								// x 画圆角的容器距画布左上角的x轴距离
								//y  画圆角的容器距画布左上角的y轴距离
								//w  画圆角的容器的宽度
								//y  画圆角的容器的高度
								//r  圆角的半径
								let x=30*that.bili,y=30*that.bili,w= 128 * that.bili,h=128 * that.bili,r=10 * that.bili
								
								
								
								 // 左上角
								 context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
								 
								 // border-top
								 context.moveTo(x + r, y)
								 context.lineTo(x + w - r, y)
								 context.lineTo(x + w, y + r)
								 
								  // 右上角
								 context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
								 
								 // border-right
								 context.lineTo(x + w, y + h - r)
								 context.lineTo(x + w - r, y + h)
								 // 右下角
								 context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
								 
								 // border-bottom
								 context.lineTo(x + r, y + h)
								 context.lineTo(x, y + h - r)
								 // 左下角
								 context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
								 
								 // border-left
								 context.lineTo(x, y + r)
								 context.lineTo(x + r, y)
								 
								 // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
								 context.fill()
								 // context.stroke()
								 context.closePath()
								 
								context.clip()
								// context.setFillStyle('blue')
								// context.fillRect(30 * that.bili,30 * that.bili, 300, 300);
								// context.restore()
								// ········································
								
								context.drawImage(res.tempFilePath, 30 * that.bili, (94 * that.bili - 128 * that.bili / bi / 2 ),128 * that.bili , 128 * that.bili / bi)
								context.restore()
								context.draw()
								
								// x: 0,
								// y: 0,
								// width:  702*that.bili,
								// height:  788*that.bili,
								// destWidth: 702*that.bili,
								// destHeight: 788*that.bil,
								// 加上上面这些图片保存下来没有图片只有文字和背景色
								// 保存图片时把上面这些去掉即可他会按照你画布的尺寸吧图片保存下来
								uni.canvasToTempFilePath({
								
								  canvasId: 'mycanvas',
								  fileType:'jpg',
								  success: function(res) {
									that.src = res.tempFilePath
								  } 
								})
								
							}
						})
					}
				})
		},
		methods: {
			
			login(){
			     var that = this;
				 let data = {
					scene:'status=1&loginId=728432c2a95b45ad8d53eda93fe7f815',
					page:'pages/my/selfPage'
				 }
			    myhomepagecode(data).then(res=>{
					console.log(res,'可立即隔离开关')
				})
			},
			baocun(){
				let that = this;
				if(!that.src){
					return
				}
				uni.saveImageToPhotosAlbum({
					filePath: that.src,
					success: function () {
						that.$msg('图片已保存至相册')
					}
				});
			}

		}
	}
</script>

<style>
	page{
		background-color: #F9F9F9;
		padding-top: 130rpx;
		font-size: 28rpx;
	}
	.content{
		background-color: #FFFFFF;
		margin: 0 24rpx;
		padding: 30rpx;
	}
	.user_type {
		padding: 1rpx 16rpx;
		background-color: #FFEAEF;
		border-radius: 18rpx;
		color: #F91A4C;
		font-size: 22rpx;
		margin-left: 10rpx;
	}
	.erwri{
		width: 580rpx;
		height: 580rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.fen_an{
		position: relative;
		margin: 0 auto;
		margin-top: 50rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999
	}
	.fen_an image{
		margin: 0 auto;
		width: 100rpx;
		height: 100rpx;
	}
</style>