36 KiB

Raw Blame History

Painter 画板测试版

uniapp 海报画板，更优雅的海报生成方案
查看更多站点 1
查看更多站点 2
Q 群：806744170

平台兼容

H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ 小程序	App
√	√	√	未测	√	√	√

安装

在市场导入海报画板uni_modules版本的即可，无需import

代码演示

基本用法

插件提供 JSON 及 XML 的方式绘制海报
参考了 css 块状流布局模拟 css schema 方式。
使用JSON的方式时，请使用驼峰key

方式一 XML

提供l-painter-view、l-painter-text、l-painter-image、l-painter-qrcode四种类型组件
通过 css 属性绘制样式，与 style 使用方式保持一致。

<l-painter>
  <l-painter-view
    css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"
  ></l-painter-view>
  <l-painter-view
    css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"
  ></l-painter-view>
  <l-painter-view
    css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"
  ></l-painter-view>
</l-painter>

方式二 JSON

在 json 里四种类型组件的type为view、text、image、qrcode
通过 board 设置海报所需的 JSON 数据进行绘制或ref获取组件实例调用组件内的render(json)
所有类型的 schema 都具有css字段，css 的 key 值使用驼峰如：lineHeight

<l-painter :board="poster"/>

data() {
	return {
		poster: {
			css: {
				// 根节点若无尺寸，自动获取父级节点
				width: '750rpx'
			},
			views: [
				{
					css: {
						background: "#07c160",
						height: "120rpx",
						width: "120rpx",
						display: "inline-block"
					},
					type: "view"
				},
				{
					css: {
						background: "#1989fa",
						height: "120rpx",
						width: "120rpx",
						borderTopRightRadius: "60rpx",
						borderBottomLeftRadius: "60rpx",
						display: "inline-block",
						margin: "0 30rpx"
					},
					views: [],
					type: "view"
				},
				{
					css: {
						background: "#ff9d00",
						height: "120rpx",
						width: "120rpx",
						borderRadius: "50%",
						display: "inline-block"
					},
					views: [],
					type: "view"
				},
			]
		}
	}
}

View 容器

类似于 div 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树
在 JSON 里具有 views 的数组字段，用于嵌套承载节点。

方式一 XML

<l-painter>
  <l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
    <l-painter-view
      css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block"
    ></l-painter-view>
    <l-painter-view
      css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block"
    ></l-painter-view>
  </l-painter-view>
</l-painter>

方式二 JSON

{
	css: {},
	views: [
		{
			type: 'view',
			css: {
				background: '#f0f0f0',
				paddingTop: '100rpx'
			},
			views: [
				{
					type: 'view',
					css: {
						background: '#d9d9d9',
						width: '33.33%',
						height: '100rpx',
						display: 'inline-block'
					}
				},
				{
					type: 'view',
					css: {
						background: '#bfbfbf',
						width: '66.66%',
						height: '100rpx',
						display: 'inline-block'
					}
				}
			],

		}
	]
}

Text 文本

通过 text 属性填写文本内容。
支持\n换行符
支持省略号，使用 css 的line-clamp设置行数，当文字内容超过会显示省略号。
支持text-decoration

方式一 XML

<l-painter>
  <l-painter-view css="background: #e0e2db; padding: 30rpx; color: #222a29">
    <l-painter-text
      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
    />
    <l-painter-text
      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
      css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
    />
    <l-painter-text
      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
      css="text-align:right; padding-top: 20rpx"
    />
    <l-painter-text
      text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
      css="line-clamp: 3; padding-top: 20rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%); background-clip: text"
    />
  </l-painter-view>
</l-painter>

方式二 JSON

// 基础用法
{
	type: 'text',
	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
},
{
	type: 'text',
	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
	css: {
		// 设置居中对齐
		textAlign: 'center',
		// 设置中划线
		textDecoration: 'line-through'
	}
},
{
	type: 'text',
	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
	css: {
		// 设置右对齐
		textAlign: 'right',
	}
},
{
	type: 'text',
	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
	css: {
		// 设置行数，超出显示省略号
		lineClamp: 3,
		// 渐变文字
		background: 'linear-gradient(,#ff971b 0%, #1989fa 100%)',
		backgroundClip: 'text'
	}
}

Image 图片

通过 src 属性填写图片路径。
图片路径支持：网络图片，本地 static 里的图片路径，缓存路径
通过 css 的 object-fit属性可以设置图片的填充方式，可选值见下方 CSS 表格。
通过 css 的 object-position配合 object-fit 可以设置图片的对齐方式，类似于background-position，详情见下方 CSS 表格。
使用网络图片时：小程序需要去公众平台配置 downloadFile 域名
使用网络图片时：H5 和 Nvue 需要决跨域问题

方式一 XML

<l-painter>
  <!-- 基础用法 -->
  <l-painter-image
    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
    css="width: 200rpx; height: 200rpx"
  />
  <!-- 填充方式 -->
  <!-- css object-fit 设置 填充方式 见下方表格-->
  <l-painter-image
    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
    css="width: 200rpx; height: 200rpx; object-fit: contain; background: #eee"
  />
  <!-- css object-position 设置 图片的对齐方式-->
  <l-painter-image
    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
    css="width: 200rpx; height: 200rpx; object-fit: contain; object-position: 50% 50%; background: #eee"
  />
</l-painter>

方式二 JSON

// 基础用法
{
	type: 'image',
	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
	css: {
		width: '200rpx',
		height: '200rpx'
	}
},
// 填充方式
// css objectFit 设置 填充方式 见下方表格
{
	type: 'image',
	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
	css: {
		width: '200rpx',
		height: '200rpx',
		objectFit: 'contain'
	}
},
// css objectPosition 设置 图片的对齐方式
{
	type: 'image',
	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
	css: {
		width: '200rpx',
		height: '200rpx',
		objectFit: 'contain',
		objectPosition: '50% 50%'
	}
}

Qrcode 二维码

通过text属性填写需要生成二维码的文本。
通过 css 里的 color 可设置生成码点的颜色。
通过 css 里的 background可设置背景色。
通过 css 里的 width、height设置尺寸。

方式一 XML

<l-painter>
  <l-painter-qrcode
    text="limeui.qcoon.cn"
    css="width: 200rpx; height: 200rpx"
  />
</l-painter>

方式二 JSON

{
	type: 'qrcode',
	text: 'limeui.qcoon.cn',
	css: {
		width: '200rpx',
		height: '200rpx',
	}
}

生成图片

1、通过设置isCanvasToTempFilePath自动生成图片并在 @success 事件里接收海报临时路径
2、通过调用内部方法生成图片：

<l-painter ref="painter">...code</l-painter>

this.$refs.painter.canvasToTempFilePathSync({
  fileType: "jpg",
  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
  pathType: 'url',
  quality: 1,
  success: (res) => {
    console.log(res.tempFilePath);
	// 非H5 保存到相册
	// H5 提示用户长按图另存
	uni.saveImageToPhotosAlbum({
		filePath: res.tempFilePath,
		success: function () {
			console.log('save success');
		}
	});
  },
});

主动调用方式

通过获取组件实例内部的render函数传递JSON即可

<l-painter ref="painter" />

// 渲染
this.$refs.painter.render(jsonSchema);
// 生成图片
this.$refs.painter.canvasToTempFilePathSync({
  fileType: "jpg",
  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
  pathType: 'url',
  quality: 1,
  success: (res) => {
    console.log(res.tempFilePath);
	// 非H5 保存到相册
	uni.saveImageToPhotosAlbum({
		filePath: res.tempFilePath,
		success: function () {
			console.log('save success');
		}
	});
  },
});

H5跨域

一般是需要后端或管理OSS资源的大佬处理
一般OSS的处理方式:

1、设置来源

2、允许Methods

GET

3、允许Headers

access-control-allow-origin:*

4、最后如果还是不行,可试下给插件设置useCORS

<l-painter useCORS>

海报示例

提供一份示例，只把插件当成生成图片的工具，非必要不要在弹窗里使用。
通过设置isCanvasToTempFilePath主动生成图片，再由 @success 事件接收海报临时路径
设置custom-style="position: fixed; left: 200%"样式把画板移到屏幕之外，达到隐藏画板的效果。
注意：受平台影响海报画板最好不要隐藏，可能会无法生成图片。

方式一 XML

<image :src="path" mode="widthFix"></image>
<l-painter
  isCanvasToTempFilePath
  @success="path = $event"
  custom-style="position: fixed; left: 200%"
  css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)"
>
  <l-painter-image
    src="https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg"
    css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;"
  />
  <l-painter-view
    css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block"
  >
    <l-painter-text
      text="隔壁老王"
      css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold"
    />
    <l-painter-text
      text="为您挑选了一个好物"
      css="color: rgba(255,255,255,.7); font-size: 24rpx"
    />
  </l-painter-view>
  <l-painter-view
    css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
  >
    <l-painter-image
      src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
      css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;"
    />
    <l-painter-view
      css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;"
    >
      <l-painter-text text="￥" css="vertical-align: bottom" />
      <l-painter-text
        text="39"
        css="vertical-align: bottom; font-size: 58rpx"
      />
      <l-painter-text text=".39" css="vertical-align: bottom" />
      <l-painter-text
        text="￥59.99"
        css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"
      />
    </l-painter-view>
    <l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
      <l-painter-text text="自营" css="color: #212121; background: #ffb400;" />
      <l-painter-text
        text="30天最低价"
        css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"
      />
      <l-painter-text
        text="满减优惠"
        css="margin-left: 16rpx; background: #fff4d9"
      />
      <l-painter-text
        text="超高好评"
        css="margin-left: 16rpx; background: #fff4d9"
      />
    </l-painter-view>
    <l-painter-view css="margin-top: 30rpx">
      <l-painter-text
        css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
        text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"
      ></l-painter-text>
      <l-painter-qrcode
        css="width: 128rpx; height: 128rpx;"
        text="limeui.qcoon.cn"
      ></l-painter-qrcode>
    </l-painter-view>
  </l-painter-view>
</l-painter>

data() {
	return {
		path: ''
	}
}

方式二 JSON

<image :src="path" mode="widthFix"></image>
<l-painter
  :board="poster"
  isCanvasToTempFilePath
  @success="path = $event"
  custom-style="position: fixed; left: 200%"
/>

data() {
	return {
		path: '',
		poster: {
		    css: {
		        width: "750rpx",
		        paddingBottom: "40rpx",
		        background: "linear-gradient(,#000 0%, #ff5000 100%)"
		    },
		    views: [
		        {
		            src: "https://fastly.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg",
		            type: "image",
		            css: {
		                background: "#fff",
		                objectFit: "cover",
		                marginLeft: "40rpx",
		                marginTop: "40rpx",
		                width: "84rpx",
		                border: "2rpx solid #fff",
		                boxSizing: "border-box",
		                height: "84rpx",
		                borderRadius: "50%"
		            }
		        },
		        {
		            type: "view",
		            css: {
		                marginTop: "40rpx",
		                paddingLeft: "20rpx",
		                display: "inline-block"
		            },
		            views: [
		                {
		                    text: "隔壁老王",
		                    type: "text",
		                    css: {
		                        display: "block",
		                        paddingBottom: "10rpx",
		                        color: "#fff",
		                        fontSize: "32rpx",
		                        fontWeight: "bold"
		                    }
		                },
		                {
		                    text: "为您挑选了一个好物",
		                    type: "text",
		                    css: {
		                        color: "rgba(255,255,255,.7)",
		                        fontSize: "24rpx"
		                    },
		                }
		            ],
		        },
		        {
		            css: {
		                marginLeft: "40rpx",
		                marginTop: "30rpx",
		                padding: "32rpx",
		                boxSizing: "border-box",
		                background: "#fff",
		                borderRadius: "16rpx",
		                width: "670rpx",
		                boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
		            },
		            views: [
		                {
							src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
							type: "image",
		                    css: {
		                        objectFit: "cover",
		                        objectPosition: "50% 50%",
		                        width: "606rpx",
		                        height: "606rpx"
		                    },
		                }, {
		                    css: {
		                        marginTop: "32rpx",
		                        color: "#FF0000",
		                        fontWeight: "bold",
		                        fontSize: "28rpx",
		                        lineHeight: "1em"
		                    },
		                    views: [{
								text: "￥",
								type: "text",
		                        css: {
		                            verticalAlign: "bottom"
		                        },
		                    }, {
								text: "39",
								type: "text",
		                        css: {
		                            verticalAlign: "bottom",
		                            fontSize: "58rpx"
		                        },
		                    }, {
								text: ".39",
								type: "text",
		                        css: {
		                            verticalAlign: "bottom"
		                        },
		                    }, {
								text: "￥59.99",
								type: "text",
		                        css: {
		                            verticalAlign: "bottom",
		                            paddingLeft: "10rpx",
		                            fontWeight: "normal",
		                            textDecoration: "line-through",
		                            color: "#999999"
		                        }
		                    }],

		                    type: "view"
		                }, {
		                    css: {
		                        marginTop: "32rpx",
		                        fontSize: "26rpx",
		                        color: "#8c5400"
		                    },
		                    views: [{
								text: "自营",
								type: "text",
		                        css: {
		                            color: "#212121",
		                            background: "#ffb400"
		                        },
		                    }, {
								text: "30天最低价",
								type: "text",
		                        css: {
		                            marginLeft: "16rpx",
		                            background: "#fff4d9",
		                            textDecoration: "line-through"
		                        },
		                    }, {
								text: "满减优惠",
								type: "text",
		                        css: {
		                            marginLeft: "16rpx",
		                            background: "#fff4d9"
		                        },
		                    }, {
								text: "超高好评",
								type: "text",
		                        css: {
		                            marginLeft: "16rpx",
		                            background: "#fff4d9"
		                        },

		                    }],

		                    type: "view"
		                }, {
		                    css: {
		                        marginTop: "30rpx"
		                    },
		                    views: [
								{
									text: "360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝",
									type: "text",
									css: {
										paddingRight: "32rpx",
										boxSizing: "border-box",
										lineClamp: 2,
										color: "#333333",
										lineHeight: "1.8em",
										fontSize: "36rpx",
										width: "478rpx"
		                        },
		                    }, {
								text: "limeui.qcoon.cn",
								type: "qrcode",
		                        css: {
		                            width: "128rpx",
		                            height: "128rpx",
		                        },

		                    }],
		                    type: "view"
		                }],
		            type: "view"
		        }
		    ]
		}
	}
}

Nvue

必须为HBX 3.4.11及以上

原生小程序

插件里的painter.js支持在原生小程序中使用
new Painter 之后在source里传入 JSON
再调用render绘制海报
如需生成图片，请查看微信小程序 cavnas 的canvasToTempFilePath

<canvas type="2d" id="painter" style="width: 100%"></canvas>

import { Painter } from "./painter";
page({
  data: {
    poster: {
      css: {
        width: "750rpx",
      },
      views: [
        {
          type: "view",
          css: {
            background: "#d2d4c8",
            paddingTop: "100rpx",
          },
          views: [
            {
              type: "view",
              css: {
                background: "#5f7470",
                width: "33.33%",
                height: "100rpx",
                display: "inline-block",
              },
            },
            {
              type: "view",
              css: {
                background: "#889696",
                width: "33.33%",
                height: "100rpx",
                display: "inline-block",
              },
            },
            {
              type: "view",
              css: {
                background: "#b8bdb5",
                width: "33.33%",
                height: "100rpx",
                display: "inline-block",
              },
            },
          ],
        },
      ],
    },
  },
  async onLoad() {
    const res = await this.getCentext();
    const painter = new Painter(res);
    // 返回计算布局后的整个内容尺寸
    const { width, height } = await painter.source(this.data.poster);
    // 得到计算后的尺寸后 可给canvas尺寸赋值，达到动态响应效果
    // 渲染
    await painter.render();
  },
  // 获取canvas 2d
  // 非2d也可以使用这里只是举个例子
  getCentext() {
    return new Promise((resolve) => {
      wx.createSelectorQuery()
        .select(`#painter`)
        .node()
        .exec((res) => {
          let { node: canvas } = res[0];
          resolve({
            canvas,
            context: canvas.getContext("2d"),
            width: canvas.width,
            height: canvas.height,
            pixelRatio: 2,
          });
        });
    });
  },
});

旧版(1.6.x)更新

由于 1.8.x 版放弃了以定位的方式，所以 1.6.x 版更新之后要每个样式都加上position: absolute
旧版的 image mode 模式被放弃，使用object-fit
旧版的 isRenderImage 改成 is-canvas-to-temp-filePath
旧版的 maxLines 改成 line-clamp

API

Props

参数	说明	类型	默认值
board	JSON 方式的海报元素对象集	object	-
css	海报最外层的样式，可以理解为`body`	object	参数请向下看
custom-style	canvas 自定义样式	string
is-canvas-to-temp-filePath	是否生成图片，在`@success`事件接收图片地址	boolean	`false`
after-delay	生成图片错乱，可延时生成图片	number	`100`
type	canvas 类型，对微信头条支付宝小程序可有效,可选值：`2d`，`''`	string	`2d`
file-type	生成图片的后缀类型, 可选值：`png`、`jpg`	string	`png`
path-type	生成图片路径类型，可选值`url`、`base64`	string	`-`
pixel-ratio	生成图片的像素密度，默认为对应手机的像素密度，`nvue`无效	number	`-`
width	废弃画板的宽度，一般只用于通过内部方法时加上	number	``
height	废弃画板的高度，同上	number	``

css

属性名	支持的值或类型	默认值
(min\max)width	支持`%`、`rpx`、`px`	-
height	同上	-
color	`string`	-
position	定位，可选值：`absolute`、`fixed`	-
↳ left、top、right、bottom	配合`position`才生效，支持`%`、`rpx`、`px`	-
margin	可简写或各方向分别写，如：`margin-top`，支持`auto`、`rpx`、`px`	-
padding	可简写或各方向分别写，支持`rpx`、`px`	-
border	可简写或各个值分开写：`border-width`、`border-style` 、`border-color`，简写请按顺序写	-
line-clamp	`number`，超过行数显示省略号	-
vertical-align	文字垂直对齐，可选值：`bottom`、`top`、`middle`	`middle`
line-height	文字行高，支持`rpx`、`px`、`em`	`1.4em`
font-weight	文字粗细，可选值：`normal`、`bold`	`normal`
font-size	文字大小，`string`，支持`rpx`、`px`	`14px`
text-decoration	文本修饰，可选值：`underline` 、`line-through`、`overline`	-
text-align	文本水平对齐，可选值：`right` 、`center`	`left`
display	框类型，可选值：`block`、`inline-block`、`flex`、`none`，当为`none`时是不渲染该段, `flex`功能简陋。	-
flex	配合 display: flex; 属性定义了在分配多余空间,目前只用为数值如： flex: 1	-
align-self	配合 display: flex; 单个项目垂直轴对齐方式: `flex-start` `flex-end` `center`	`flex-start`
justify-content	配合 display: flex; 水平轴对齐方式: `flex-start` `flex-end` `center`	`flex-start`
align-items	配合 display: flex; 垂直轴对齐方式: `flex-start` `flex-end` `center`	`flex-start`
border-radius	圆角边框，支持`%`、`rpx`、`px`	-
box-sizing	可选值：`border-box`	-
box-shadow	投影	-
background(color)	支持渐变，但必须写百分比！如:`linear-gradient(,#ff971b 0%, #ff5000 100%)`、`radial-gradient(#0ff 15%, #f0f 60%)`,目前 radial-gradient 渐变的圆心为元素中点，半径为最长边，不支持设置	-
background-clip	文字渐变，配合`background`背景渐变，设置`background-clip: text` 达到文字渐变效果	-
background-image	view 元素背景：`url(src)`,若只是设置背景图，请不要设置`background-repeat`	-
background-repeat	设置是否及如何重复背景纹理，可选值：`repeat`、`repeat-x`、`repeat-y`、`no-repeat`	`repeat`
object-fit	图片元素适应容器方式,类似于`mode`,可选值：`cover`、 `contain`、 `fill`、 `none`	-
object-position	图片的对齐方式，配合`object-fit`使用	-

图片填充模式 object-fit

名称	含义
contain	保持宽高缩放图片，使图片的长边能完全显示出来
cover	保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill	拉伸图片，使图片填满元素
none	保持图片原有尺寸

事件 Events

事件名	说明	返回值
success	生成图片成功,若使用`is-canvas-to-temp-filePath` 可以接收图片地址	path
fail	生成图片失败	error
done	绘制成功
progress	绘制进度	number

内部函数 Ref

事件名	说明	返回值
render(object)	渲染器，传入JSON 绘制海报	promise
canvasToTempFilePath(object)	把当前画布指定区域的内容导出生成指定大小的图片，并返回文件临时路径。
canvasToTempFilePathSync(object)	同步接口，同上

常见问题

1、H5 端使用网络图片需要解决跨域问题。
2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！
3、H5 端生成图片是 base64，有时显示只有一半可以使用原生标签<IMG/>
4、发生保存图片倾斜变形或提示 native buffer exceed size limit 时，使用 pixel-ratio="2"参数，降分辨率。
5、h5 保存图片不需要调接口，提示用户长按图片保存。
6、画板不能隐藏，包括v-if，v-show、display:none、opacity:0，另外也不要把画板放在弹窗里。如果需要隐藏画板请设置 custom-style="position: fixed; left: 200%"
7、微信小程序 canvas 2d 不支持真机调试，请使用真机预览方式。
8、微信小程序打开调试时可以生但并闭无法生成时，这种情况一般是没有在公众号配置download域名
9、HBX 3.4.5之前的版本不支持vue3
10、在微信开发工具上 canvas 层级最高无法zindex，并不影响真机
11、请不要导入非uni_modules插件
华为手机 APP 上无法生成图片，请使用 HBX2.9.11++（已过时，忽略这条）
IOS APP 请勿使用 HBX2.9.3.20201014 的版本！这个版本无法生成图片。（已过时，忽略这条）
苹果微信 7.0.20 存在闪退和图片无法 onload 为微信 bug（已过时，忽略这条）

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

36 KiB Raw Blame History

Painter 画板 测试版

平台兼容

安装

代码演示

基本用法

方式一 XML

方式二 JSON

View 容器

方式一 XML

方式二 JSON

Text 文本

方式一 XML

方式二 JSON

Image 图片

方式一 XML

方式二 JSON

Qrcode 二维码

方式一 XML

方式二 JSON

生成图片

主动调用方式

H5跨域

海报示例

方式一 XML

方式二 JSON

Nvue

原生小程序

旧版(1.6.x)更新

API

Props

css

图片填充模式 object-fit

事件 Events

内部函数 Ref

常见问题

打赏

36 KiB

Raw Blame History

Painter 画板测试版