KanMi - uniapp三端兼容组件工具库

查看手机演示

# poster 海报

uniapp 海报制作，通过提供的组件实例方法，进行画布绘画，几行代码生成想要的海报

# 平台兼容

H5 微信小程序 APP(ios/Android)
√ √ √

# 快速使用

注意

该canvas组件只提供画布渲染，不展示占用dom页面，返回一个base64 本地图片地址, 并且通过调用链型方法顺序作为层级

提示

强烈推荐：canvas画布组件width和height建议与展示的图片元素 宽高一致，在绘画时就能更好的设置x、y、宽高，生成的图片完整。

1.挂载画布组件，设置画布组件的宽高

	<k-poster ref="poster" :width="500" :height="800"></k-poster>
	<image :src="src" style="width: 500rpx;height: 800rpx;" ></image>

2.获取画布组件的实例，进行初始挂载方法及实例 (必须在mounted后调用，不然dom没生成获取不到元素节点)

	async mounted() {
				let posterRef = this.$refs.poster;
				await posterRef.init(); //第一步必须 调用init()初始化组件
				
				// 链型绘画（最后调用.draw()方法渲染返回promise数据的图片url）
				let src = await posterRef
					.setBackgroundColor("#ffffff") //设置画布背景色
					.addImage("https://img1.baidu.com/it/u=3286720786,1295176663&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",20, 20, 450, 600) //添加照片
					.addText("超级猫咪~_~", 20, 640, 30, "#414141") //添加文字
					.addText("扫码进入KK音乐=>", 20, 730, 30, "#ff0000")
					.addRect(20, 690, 450, 10, "#a8a8a8") //添加一个矩形
					.addQRCode("https://www.baidu.com", 20, 20, 130, 130) //添加二维码（文本内容：自动生成二维码）
					.draw(); //执行渲染
				
				this.src = src
			},
	},

# API

# 组件值

参数 说明 类型 默认值 必传
width 画布的宽度，单位为 rpx number 0 √
height 画布的高度，单位rpx number 0 √

# 组件实例链型方法(function)

 init()                                              //初始化实例以及所有链型方法
 setBackgroundColor(String)                          //设置画布背景色 =》 参数为: (颜色值) 
 addImage(url , x , y , width , height , fasle )     //添加图片 =》 参数为: (url地址，x轴，y轴，宽度，高度，是否绘制为圆形)  [6个参数，最后一个设为true则绘制圆形图] 
 addText(string , x , y , size , string)             //添加文字 =》 参数为: (文本，x轴，y轴，文字大小，颜色值) 
 addRect(x , y , width , height)                     //添加矩形 =》 参数为: (x轴，y轴，宽度，高度) 
 addQRCode(url , x , y , width , height)             //添加二维码 =》参数为: (url地址，x轴，y轴，宽度，高度)  [自动生成以url地址的二维码图片并添加画布] 
 draw()                                              //执行渲染 [实例返回pomise数据的图片url]

# 使用例子(生成本地图片url)

<template>
	<view class="content">

		<image :src="src" style="width: 500rpx;height: 800rpx;" v-if="src != ''"></image>

		<view class="btnList">
			<view class="button" @click="setCanvasImg">生成海报</view>
			<view class="button red" @click="downloadImg">下载海报</view>
		</view>


		<!-- canvas画布渲染器：不展示dom，返回生成后的图片base64 -->
		<k-poster ref="poster" :width="500" :height="800"></k-poster>

	</view>
</template>

<script>

	export default {
		data() {
			return {
				posterRef: null, //k-canvas组件实例
				src: '', //canvas绘画后生成的图片本地url
			}
		},
		async mounted() {
			this.init()
		},

		methods: {
			/* 1、获取canvas，初始化该组件的实例（初始后才能调用方法） */
			async init() {
				this.posterRef = this.$refs.poster;
				await this.posterRef.init();
			},

			/*/2、绘画canvas并生成图片url */

			async setCanvasImg() {
				uni.showLoading({
					title: "渲染海报中"
				});

				let src = await this.posterRef
					.setBackgroundColor("#ffffff") //设置画布背景色
					.addImage(
						"https://img1.baidu.com/it/u=3286720786,1295176663&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
						20, 20, 450, 600) //添加照片
					.addText("超级猫咪~_~", 20, 640, 30, "#414141") //添加文字
					.addText("扫码进入KK音乐=>", 20, 730, 30, "#ff0000")
					.addRect(20, 690, 450, 10, "#a8a8a8") //添加一个矩形
					.addQRCode("http://119.91.237.178/home", 20, 20, 130, 130) //添加二维码（文本内容：自动生成二维码）
					.draw(); //最后：执行渲染（返回promise数据的图片url）

				this.src = src
				uni.hideLoading();
			},

			/* 保存为本地图片 */
			downloadImg() {
				let posterRef = this.$refs.poster;
				posterRef.saveImageToPhotosAlbum(this.src).then(() => {
					console.log('保存图片成功');
				}).catch((e) => {
					console.warn('保存图片失败');
				});
			}

		},

	}
</script>

<style>
	page {
		background-color: #e8e8e8;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.btnList {
		width: 100%;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 0;
	}


	.button {
		flex: 1;
		height: 80rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00b3ff;
		box-shadow:inset 0  0  10rpx 4rpx #b9b9b9;
		margin: 15rpx;
	}

	.red {
		background: #f40307;
	}
</style>

← 图片裁剪 →