jasondu / wxa-plugin-canvas Goto Github PK

View Code? Open in Web Editor NEW

3.0K 70.0 485.0 8 MB

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

License: Apache License 2.0

JavaScript 100.00%

wxapp canvas weapp weixin

wxa-plugin-canvas's Introduction

wxa-plugin-canvas

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

概述

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>

使用注意事项

图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名）
如果要使用异步生成海报的方法，务必组件要加上 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

wxa-plugin-canvas's People

Contributors

Stargazers

Watchers

Forkers

daisuklin zjhzxjm xianglongliu ccutsky itxcx hapyli idreamsoft mabiao8023 reganan zhaoyari ks1717 libin1991 xiaoyu2er qwdingyu kule2018 jooooooop fewiki baifengbai andygoo xueyan1 supersadmin ghrhomedist duheng woxinyouzuixinyuerumei xiaoye1988 xiaohuilam jmy08 jamaslee coolsnow doupo tingdahaideshengyin chengzmin python6460 wtbf diysoho jasonmiao juvham gflhx fu-you kcl55555 zhuwawa emaiqi dbl520 648578244 duantianhen2014 jiyr0119 codeshif qindj suzichen pijunhuis excelshow uscms yonking1029 jaydenccc zhangxiaolann daniellinuk xiaozhuxiaozhi lisiyizu houce billibit vqishi xyz1041931294 bingowebbb frankhan xiao-ben akoncoder hmgjdh521 xpliu2166 hfhna kylelkh zzzhen machial wangsanqu huwenjian domyhero cih315 wendesun yeayee dlhandsome guofengma kuangyeheng janyau laiqiqi mrpsweet maolala nobodycmd tandaly fuchen2020 zhangjl1017 zjh990514998 lr-account raochuan niu-1 jiang2822 yu113 iwe7 dajunzhu xiaxzhi lieutenantlau sunhai1988

wxa-plugin-canvas's Issues

文字的中间线 textDecoration: 'line-through', 没有根据传的text的宽度去自适应。

给本地的图片地址无效：downloadFile:fail invalid url

{ width: 470, height: 836, zIndex: 1, x: 0, y: 0, url: '/images/shopShareBG.png' }

支持wx.chooseImage 返回的图片地址吗小程序的canvas是支持的

2个疑问？

1、首先这个插件现在审核通过没有
2、支持自定义参数不？获取小程序二维码是不是需要后台

会出现画的图是同一张的问题

最后在onCreateSuccess加this.downloadStatus = null就解决了

报错downloadFile:fail Error: getaddrinfo ENOTFOUND tmp tmp:443

版本更新到1.1.8了但是还是会报这个错误，
图片有本地的也有http://temp/wx开头的地址非网络资源

blocks中的圆角，borderRadius二分之一处理，感觉不用除以2

比如，宽高都为200，borderRadius为100，此时应该为一个圆形，但是插件中处理后画出来的不是圆形，去掉二分之一处理后，画出来的就为正常的圆形了。

多条lines，borderColor覆盖，最后一个block出现line borderColor+borderWidth的边框

在drawLine方法内加上beginPath和closePath，解决此问题，望采纳

我明明安装依赖了呀，为什么用不了，用的是wepy框架

1npm i wxa-plugin-canvas -S --production 2"poster": "wxa-plugin-canvas/poster"
3程序报错说找不到文件

请问blocks.map is not a function是什么问题

return {
width: 500,
height: 400,
backgroundColor: '#fff',
debug: false,
borderColor: 'blue',
blocks: [
{
width: 485,
height: 383,
x: 7,
y: 8,
borderWidth: 10,
borderColor: '#CD5145'
}
],
images: [
{
width: 440,
height: 225,
x: 30,
y: 32,
url: "http://image.wulion.com/20180825/15351905175135.o6zAJs2kEQGWHOtjeKTN1qHD08cA",
}
],
texts: [{
x: 30,
y: 296,
baseLine: 'middle',
text: "奖品：锤子手机",
width: 414,
lineNum: 1,
fontSize: 32,
color: '#28354c',
},{
x: 30,
y: 342,
baseLine: 'middle',
text: "人数满 100 人自动开奖",
fontSize: 28,
color: '#8d8d8d',
}]
}

有没有办法实现flex-wrap:wrap;的效果

你好，给图片设置圆角，在Android手机上显示有问题，iphone上正常。

给图片设置圆角，安卓上显示右上角被折了

动态setData网络图片

config里面的images,图片路径如果是网络地址，无法用异步调用生成海报

关于小程序生成海报组件

那个组件里面能不能改变字体的粗细 bold 和lighter

图片模块出现downloadFile:ok

请问添加了图片模块出现downloadFile:ok该怎么处理

想问下，可以设置背景图片吗

请问怎么使用本地图片啊？

我使用本地路径的话会报错 downloadFile:fail Error: getaddrinfo ENOTFOUND tmp tmp:443

mpvue 异步怎么用

画布上图片画布不成圆形

如图，我参数上有配borderRadius,部分参数如下
images: [
{
width: 160,
height: 160,
x: 296,
y: 180,
url: 'https://zy.qutego.com//upload/images/000/000/293/201808/5b861e3aeb9fd.png',
borderRadius:160,
borderWidth:6,
borderColor:'#fff',
zIndex: 2
}
]
为何出现上面情况，有什么解决方法

图片不显示

图片不显示请求完数据赋值时图片不显示微信：shao-_-feng

我是用的异步生成海报，但是生成出来的海报很模糊

我是用的异步生成海报，但是生成出来的海报很模糊，有没有人知道是怎么回事

生成海报后页面有残留

部分Android机偶现设置文字颜色无效且定位错乱的问题

重现机型：锤子OD103 系统：Android7.1.1

希望生成图片时可以设置输出的宽、高度

Bug: wx.previewImage之后图片卡住了

Hello, @jasondu .

感谢您贡献开源项目，但是我发现了一个问题：
在生成图片并使用wx.previewImage预览，返回之后如图：

尝试解决办法去掉：

.canvas.pro {
    /*去掉就没事了*/
    /*position: absolute;*/
    bottom: 0;
    left: 0;
    /*transform: translate3d(-999rpx, 0, 0);*/
}

难道是位置不对了吗，多谢

texts的textAlign设置为center|right的时候显示不正常

开发工具绘制图片缩放比例正常，真机调试怎么就不按比例缩放了呢

[开发工具绘制图片缩放比例正常，真机调试怎么就不按比例缩放了呢]

图片比较多的时候，有的图片画不完整，是框架的问题，还是小程序canvas的问题

支持 taro 框架吗

网络资源图片下载的耗时问题

a、插件绘制的过程中，如果有相关网络资源图。会进行下载... 在这个流程中存在图片下载耗时的问题，对用户体验有点不友好。

b、能否提供一个函数，可以让使用者在页面onLoad函数中调用进行图片预下载。这样可以减少在绘制过程需要先下载网络资源图。

text中的textAlign属性，显示画出来的不是应该想要的结果

canvas中的textAlign和css中的textAlign处理不一样，css中是文字内容在其元素内的居中方式，而canvas则是x坐标在文本内容的位置。并且center的时候，y左表在文本高度的中间，和想要的结果有出入。
在使用的时候我做了如下的修改：
textArr.forEach((item, index) => {
if (textAlign === 'left') {
this.ctx.fillText(item, this.toPx(x), this.toPx(y + (lineHeight || fontSize) * index) + (lineHeight || fontSize) / 2);
}
else if (textAlign === 'center') {
this.ctx.fillText(item, this.toPx(x + width / 2), this.toPx(y + (lineHeight || fontSize) * index) + (lineHeight || fontSize) / 2);
}
else if (textAlign === 'right') {
this.ctx.fillText(item, this.toPx(x + width), this.toPx(y + (lineHeight || fontSize) * index) + (lineHeight || fontSize) / 2);
}
})，
不知道大神怎么看这个问题