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

朱雀 2023-02-26 06:21 75阅读 0赞

[Painter][]

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

## **如何使用** ##

### 1.引入代码。注意：[存放目录][Link 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形式存在 ###

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

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

在线地址为 [https://lingxiaoyi.github.io/painter-custom-poster/][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 为生成的图片路径
    },

[Painter]: https://github.com/Kujiale-Mobile/Painter
[Link 1]: https://uniapp.dcloud.io/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81
[https_lingxiaoyi.github.io_painter-custom-poster]: https://lingxiaoyi.github.io/painter-custom-poster/