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形式存在

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

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 为生成的图片路径
},

 

你可能感兴趣的:(uni-app,小程序)