poster-canvas v1.0.3

poster-canvas

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

概述

poster-canvas是一个通过配置就可以生成二维码海报的组件

安装

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

# npm
npm i poster-canvas -S --production

# yarn
yarn add poster-canvas --production

方式二.下载代码

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

使用组件

{
  "usingComponents": {
	"poster-canvas": "poster-canvas/poster/index",
  }
}

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

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


<view class="canvas_code_view" style="left: {{imgURL?'0':'-1000rpx'}};">
    <view class="canvas_mask">
        <view class="canvas_box">
            <view class="canvas_box_img">
                <image class="pic" show-menu-by-longpress src="{{imgURL}}"></image>
            </view>
        </view>
    </view>
</view>

.pic {
  width: 100%;
  height: 100%;
  /* height: 1160rpx; */
}

 /* erweima */
 .canvas_code_view {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 9999;
}

.canvas_code_view .canvas_mask {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  position: relative;
}

.canvas_box {
  width: 680rpx;
  height: 928rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
}

.canvas_box_img{
  width: 100%;
  height: 100%;
}

.canvas_close{
  height: 60rpx;
  width: 60rpx;
  position: absolute;
  top: -96rpx;
  right: 0;
  z-index: 9999;
}

使用注意事项

1. 图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名）

组件参数解释

config字段

blocks字段

texts字段

images字段

lines字段

事件

success

返回生成海报图片的本地url，如下

 onPosterSuccess(e) {
        const {
            detail
        } = e;
        this.setData({
            imgURL: detail
        })
    },

fail

返回错误信息