一个可以不用写复杂Canvas逻辑的画报解决方案，傻瓜式开发Canvas海报

一个可以不用写复杂Canvas逻辑的画报解决方案，傻瓜式开发Canvas海报 介绍参数说明configimagesimages/configimages/config/roundtexts 原生微信小程序使用方法uniapp使用方法程序页面.vue 结尾

介绍

大家好！ 这是一款可以通过JSON配置生成Canvas画报。
有原版本和uniapp版本
现阶段只能生成固定尺寸海报，如果有需求生成不固定商品图海报，等待2.0…

参数说明

参数	类型	是否必填	说明
config	Array	是	配置项

config

参数	类型	是否必填	说明
background	String	否	海报背景色（默认白色）
canvasWidth	String	是	画布宽
canvasHeight	String	是	画布高
images	Array	否	图片或矩形配置项
texts	Array	否	文字配置项

images

参数	类型	是否必填	说明
width	number	是	矩形或者图片宽
height	number	是	矩形或者图片高
url	String	否	图片的Url（1、不填写就是矩形。2、可以填写网络路径可以是本地图。）
borderRadius	number	否	圆角值
top	number	否	相对于画布Y轴值
left	number	否	相对于画布X轴值
zIndex	number	否	层级
config	Array	否	矩形配置

images/config

参数	类型	是否必填	说明
round	Objeck	否	配置哪个方向的角是圆角，默认不传全是圆角
fillColor	String	否	矩形填充颜色
type	String	否	fill / stroke / both,填充/描边/填充和描边
strokeColor	String	否	描边色

images/config/round

参数	类型	是否必填	说明
leftTop	Boolean	是	是否圆角
leftBottom	Boolean	是	是否圆角
rightTop	Boolean	是	是否圆角
rightBottom	Boolean	是	是否圆角

texts

参数	类型	是否必填	说明
fontSize	number	是	字体大小
color	number	否	字体颜色（默认#000）
zIndex	String	是	层级
fontWeight	number	否	字体粗细
content	number	是	文本内容
textAlign	String	是	文字位置 left / center / right
textBaseline	String	否	top、bottom、middle、normal 位置 （默认bottom）
top	number	是	相对于画布Y轴值
left	number	是	相对于画布X轴值
maxLength	number	否	文本最大长度（默认20）
line	number	否	可展示几行（默认1）
lineHeight	number	否	行高 （默认10）

原生微信小程序使用方法

A.wxml

// An highlighted block
 <Tool id="Tool" config="{{config}}" bindmyevent="onSuccessDraw"></Tool>
 <view style="display: flex;justify-content: space-between;width: 100%;margin-top: 30px;">
        <button bindtap="onDrawImage" style="width:30%;background: rgb(0, 122, 0);color: #fff;">
            生成图片
        </button>
        <button bindtap="onSaveImage" style="width:30%;background: rgb(0, 110, 161);color: #fff;">
            保存图片
        </button>
    </view>

A.js

// An highlighted block
Page({
    data: {
         config: {
            background: 'transparent',
            canvasWidth: 375,
            canvasHeight: 667,
            images: [
                {
                    width: 64,
                    height: 64,
                    url: '',
                    borderRadius: 32,
                    top: 35,
                    left: 20,
                    zIndex: 2,
                    config: {
                        round: {
                            leftTop: true, 
                            leftBottom: true, 
                            rightTop: true, 
                            rightBottom: true, 
                        },
                        fillColor: '#ff0000',
                        type: 'stroke',
                        strokeColor: '#000',
                    }
                }],
            texts: [
                {
                    fontSize: 16,
                    color: '#fff',
                    zIndex: 3,
                    fontWeight: 100,
                    content: '刘威威',
                    textAlign: 'left',
                    middle: '',
                    top: 60,
                    left: 92,
                    maxLength: 9,
                    line: 2
                }
            ],
        },
    // 绘图完成之后的回调函数
	onSuccessDraw(e) {
        this.setData({
            canvasImg: e.detail //生成海报-本地Url
        })
    },
    //点击或者默认执行方法 开始画图on
    onDrawImage() {
        let startPainting = this.selectComponent('#Tool')
       	startPainting.onStartPain()
    },
		
})

uniapp使用方法 程序页面.vue

<template>
	<view class="content">
		<CanvasToos ref="onToos" v-on:myevent="onSuccessDraw" :config="config"></CanvasToos>
		<image :src="canvasImg" style="width: 375px;height: 667px;"></image>
		<view style="display: flex;justify-content: space-between;width: 100%;margin-top: 30px;">
			<button @click="onDrawImage" style="width:30%;background: rgb(0, 122, 0);color: #fff;">
				生成图片
			</button>
			<button @click="onSaveImage" style="width:30%;background: rgb(0, 110, 161);color: #fff;">
				保存图片
			</button>
		</view>
	</view>
</template>

<script>
	//Canvas-Toos.vue 是组件的文件名
	import CanvasToos from '@/components/canvas-toos/Canvas-Toos.vue';
	export default {
		components: {
			CanvasToos
		},
		data() {
			return {
				canvasImg: '',
				config: {/**同上**/ },
			}
		},
		onLoad() {

		},
		methods: {
			onDrawImage() {
				this.$refs.onToos.onStartPain()
			},
			//绘图完成回调函数
			onSuccessDraw(e) {
				console.log('✅ 绘图完成', e)
				this.canvasImg = e
			},
		}
	}
</script>

结尾

基本使用方法就这些，如果有不懂的 || 插件获取。联系微信：NovLiu_08