All Projects → jasondu → Wxa Plugin Canvas

jasondu / Wxa Plugin Canvas

Licence: apache-2.0
小程序海报组件-生成朋友圈分享海报并生成图片

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Wxa Plugin Canvas

Leshare Shop Weapp
基于微信小程序的电商平台,采用原生框架开发
Stars: ✭ 183 (-93.2%)
Mutual labels:  weixin, weapp, wxapp
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (-57.17%)
Mutual labels:  weixin, weapp, wxapp
Wux Weapp
🐶 一套组件化、可复用、易扩展的微信小程序 UI 组件库
Stars: ✭ 4,706 (+74.81%)
Mutual labels:  weixin, weapp, wxapp
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (-49.67%)
Mutual labels:  weixin, weapp, wxapp
wxbizdatacrypt
微信小程序加密数据解密算法Go版
Stars: ✭ 132 (-95.1%)
Mutual labels:  weixin, weapp, wxapp
We Cropper
微信小程序图片裁剪工具
Stars: ✭ 1,972 (-26.75%)
Mutual labels:  weapp, wxapp, canvas
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-93.13%)
Mutual labels:  weixin, weapp, wxapp
Weapp Qrcode Base64
微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas
Stars: ✭ 100 (-96.29%)
Mutual labels:  weapp, wxapp
Easy Canvas
小程序简单绘图,通过 json 方式绘制一张朋友圈分享图
Stars: ✭ 117 (-95.65%)
Mutual labels:  wxapp, canvas
Wx Book
仿追书神器的小说阅读器小程序
Stars: ✭ 122 (-95.47%)
Mutual labels:  weapp, wxapp
Wxapp Redux Starter
微信小程序,集成redux,并且提供了方便快捷的开发环境;内置好奇心日报Demo...
Stars: ✭ 205 (-92.38%)
Mutual labels:  weixin, wxapp
Wx Miniprogram Boilerplate
基于Gulp微信小程序开发工作流,支持less样式编写,支持ESLint代码检查等功能
Stars: ✭ 122 (-95.47%)
Mutual labels:  weixin, wxapp
Cax
HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎
Stars: ✭ 1,864 (-30.76%)
Mutual labels:  weapp, canvas
Weapp Typescript
使用TypeScript开发微信小程序的demo, 包含微信小程序weixin最新的.d.ts定义
Stars: ✭ 84 (-96.88%)
Mutual labels:  weixin, weapp
Mp canvas drawer
🚀 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
Stars: ✭ 1,611 (-40.16%)
Mutual labels:  wxapp, canvas
Wemark
微信小程序Markdown渲染库
Stars: ✭ 1,159 (-56.95%)
Mutual labels:  weixin, weapp
Wxdraw
A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼
Stars: ✭ 1,625 (-39.64%)
Mutual labels:  weapp, canvas
Dva Wxapp
微信小程序的dva集成
Stars: ✭ 183 (-93.2%)
Mutual labels:  weapp, wxapp
Wxa Comp Canvas Drag
小程序组件-canvas拖拽组件
Stars: ✭ 208 (-92.27%)
Mutual labels:  wxapp, canvas
Wxparse
wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析
Stars: ✭ 7,618 (+182.99%)
Mutual labels:  weixin, weapp

wxa-plugin-canvas

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

概述

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

生成效果

组件原理说明文章

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
pixelRatio Number 1为一般,值越大越清晰
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 层级,越大越高
fontFamily String 小程序默认字体为'sans-serif', 请输入小程序支持的字体,例如:'STSong'
fontWeight String 'bold'加粗字体,目前小程序不支持 100 - 900 加粗
fontStyle String 'italic'倾斜字体

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(); 
    	});
    }
})

自定义组件异步生成海报

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

只需要引入组件中的poster/poster.js,如下调用就行了,与page不同的是,需要在Poster.create中加入this。

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

赞赏

问题反馈

有什么问题可以直接提issue

提issue

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].