51

GitHub - jasondu/wxa-plugin-canvas: 小程序海报组件-生成朋友圈分享海报并生成图片

 5 years ago
source link: https://github.com/jasondu/wxa-plugin-canvas
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

wxa-plugin-canvas

小程序组件-小程序海报组件 npm npm

概述

wxa-plugin-canvas是一个生成二维码海报的组件，通过非常简单的配置就可以生成精美的海报

生成效果

demo.png

组件原理说明文章

https://juejin.im/post/5b7e48566fb9a01a1059543f

使用之前

使用 wxa-plugin-canvas 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

方式一.通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# npm
npm i wxa-plugin-canvas -S --production

# yarn
yarn add wxa-plugin-canvas --production

方式二.下载代码

直接通过 git 下载 wxa-plugin-canvas 源代码，并将miniprogram_dist目录拷贝到自己的项目组件目录中

使用组件

{
  "usingComponents": {
	"poster": "wxa-plugin-canvas/poster",
  }
}

接着就可以在 wxml 中直接使用组件

<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
    <button>点击生成海报</button>
</poster>

使用注意事项

  1. 图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名）
  2. 如果要使用异步生成海报的方法，务必组件要加上 id="poster"

组件参数解释

###config字段

字段 类型 必填 描述 width Number(单位:rpx) 是 画布宽度 height Number(单位:rpx) 是 画布高度 backgroundColor String 否 画布颜色 debug Boolean 否 false隐藏canvas，true显示canvas，默认false preload Boolean 否 true：图片资源预下载 默认false hide-loading Boolean 否 true：隐藏loading 默认false blocks Object Array（对象数组） 否 看下文 texts Object Array（对象数组） 否 看下文 images Object Array（对象数组） 否 看下文 lines Object Array（对象数组） 否 看下文

###blocks字段

字段名 类型 必填 描述 x Number(单位:rpx) 是 块的坐标 y Number(单位:rpx) 是 块的坐标 width Number(单位:rpx) 否 如果内部有文字，由文字宽度和内边距决定 height Number(单位:rpx) 是

paddingLeft Number(单位:rpx) 否 内左边距 paddingRight Number(单位:rpx) 否 内右边距 borderWidth Number(单位:rpx) 否 边框宽度 borderColor String 否 边框颜色 backgroundColor String 否 背景颜色 borderRadius Number(单位:rpx) 否 圆角 text Object 否 块里面可以填充文字，参考texts字段解释 zIndex Int 否 层级，越大越高

texts字段

字段名 类型 必填 描述 x Number(单位:rpx) 是 坐标 y Number(单位:rpx) 是 坐标 text String|Object 是 当Object类型时，参数为text字段的参数，marginLeft、marginRight这两个字段可用（示例请看下文） fontSize Number(单位:rpx) 是 文字大小 color String 否 颜色 opacity Int 否 1为不透明，0为透明 lineHeight Number(单位:rpx) 否 行高 lineNum Int 否 根据宽度换行，最多的行数 width Number(单位:rpx) 否 没有指定为画布宽度 marginLeft Number(单位:rpx) 否 当text字段为Object可以使用，用来控制多行文字间距 marginRight Number(单位:rpx) 否 当text字段为Object可以使用，用来控制多行文字间距 textDecoration String 否 目前只支持 line-through（贯穿线），默认为none baseLine String 否 top| middle|bottom基线对齐方式 textAlign String 否 left|center|right对齐方式 zIndex Int 否 层级，越大越高

images字段

字段 类型 必填 描述 x Number(单位:rpx) 是 右上角的坐标 y Number(单位:rpx) 是 右上角的坐标 url String 是 图片url（需要添加到下载白名单域名中）也支持本地图片 width Number(单位:rpx) 是 宽度（会根据图片的尺寸同比例缩放） height Number(单位:rpx) 是 高度（会根据图片的尺寸同比例缩放） borderRadius Number(单位:rpx) 否 圆角，跟css一样 borderWidth Number(单位:rpx) 否 边框宽度 borderColor String 否 边框颜色 zIndex Int 否 层级，越大越高

lines字段

字段 类型 必填 描述 startX Number(单位:rpx) 是 起始坐标 startY Number(单位:rpx) 是 起始坐标 endX Number(单位:rpx) 是 终结坐标 endY Number(单位:rpx) 是 终结坐标 width Number(单位:rpx) 是 线的宽度 color String 否 线的颜色 zIndex Int 否 层级，越大越高

事件

success

返回生成海报图片的本地url，一般做法是使用wx.previewImage预览海报，如下

onPosterSuccess(e) {
	const { detail } = e;
	wx.previewImage({
        current: detail,
        urls: [detail]
    })
}

fail

返回错误信息

异步生成海报

有些场景可能需要发起ajax请求后才能获取生成海报的数据，这里提供了异步生成海报的方式。

只需要引入组件中的poster/poster.js，如下调用就行了

import Poster from '../../miniprogram_dist/poster/poster';
Page({
    /**
     * 异步生成海报
     */
    onCreatePoster() {
    	// setData配置数据
    	this.setData({ posterConfig: {...} }, () => {
        	Poster.create(); 
    	});
    }
})

问题反馈

有什么问题可以直接提issue

提issue


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK