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

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

Painter

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

如何使用

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

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

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

  1. "style": {
  2.                 "navigationBarTitleText": "目录名",
  3.                 "usingComponents":{
  4.                   "painter":"/components/painter/painter"
  5.                   //"painter":"/wxcomponents/painter/painter"//存放在uni-app指定目录
  6.                 }
  7.             }

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

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

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

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

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

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

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

4.绑定imgOk事件

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

  1. bind:imgOK="onImgOK"//@imgOk="onImgOK"
  2. bind:imgErr="onImgErr"
  4. onImgOK(e) {
  5.   其中 e.detail.path 为生成的图片路径
  6. },

发表评论

表情：
评论列表 （有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读