uni-app生成分享图片（ 使用 Painter 生成分享海报）

Painter

支持文本、图片、矩形、qrcode 类型的 view 绘制。

如何使用

1.引入代码。注意：存放目录   uni-app根据不同平台插件存放目录不同。

git clone https://github.com/Kujiale-Mobile/Painter.git

2.作为自定义组件引入，注意目录为第一步引入的代码所在目录

			"style": {
				"navigationBarTitleText": "目录名",
				"usingComponents":{
				  "painter":"/components/painter/painter"
				  //"painter":"/wxcomponents/painter/painter"//存放在uni-app指定目录
				}
			}

3.使用，组件接收 palette 字段作为画图数据的数据源, 图案数据以json形式存在

<painter palette="{{data}}" bind:imgOK="onImgOK" />

可以通过设置 widthPixels 来强制指定生成的图片的像素宽度，否则，会根据你画布中设置的大小来动态调节，比如你用了 rpx，则在 iphone 6 上会生成 0.5 倍像素的图片。由于 canvas 绘制的图片像素直接由 Canvas 本身大小决定，此处通过同比例放大整个画布来实现对最后生成的图片大小的调节。Painter 内部生成图片时，调用的是微信的 canvasToTempFilePath API。

<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>

json数据官方提供了海报在线生成工具

在线地址为 https://lingxiaoyi.github.io/painter-custom-poster/

只要在工具中生成海报，复制生成的json数据进行使用。

4.绑定imgOk事件

数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。

bind:imgOK="onImgOK"//@imgOk="onImgOK"
bind:imgErr="onImgErr"

onImgOK(e) {
  其中 e.detail.path 为生成的图片路径
},