# weapp-canvas-poster

> # 微信小程序canvas绘制海报

Latest version **1.0.11** (published 2021-10-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install weapp-canvas-poster
pnpm add weapp-canvas-poster
yarn add weapp-canvas-poster
bun add weapp-canvas-poster
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2021-10-28 |
| First published | 2021-10-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xy89 |

## Links

- npm: https://www.npmjs.com/package/weapp-canvas-poster
- npm.io page: https://npm.io/package/weapp-canvas-poster

## Dependencies (1)

- [weapp-qrcode-canvas-2d](https://npm.io/package/weapp-qrcode-canvas-2d.md) ^1.1.1

## Recent versions

- 1.0.11 (latest) — 2021-10-28
- 1.0.10 — 2021-10-28
- 1.0.9 — 2021-10-28
- 1.0.8 — 2021-10-28
- 1.0.7 — 2021-10-28
- 1.0.6 — 2021-10-28
- 1.0.5 — 2021-10-28
- 1.0.4 — 2021-10-28
- 1.0.3 — 2021-10-28
- 1.0.2 — 2021-10-28
- 1.0.1 — 2021-10-28
- 1.0.0 — 2021-10-28

## README

<!--
 * @Descripttion: 
 * @FilePath: /weapp-canvas-poster/README.md
 * @Author: 张兴业
 * @Date: 2021-10-28 21:00:18
 * @LastEditors: 张兴业
 * @LastEditTime: 2021-10-28 21:43:01
-->
# 微信小程序canvas绘制海报

## 安装方式 - npm
  ```
  npm install weapp-canvas-poster --save
  ```

## 使用方法
### wxml
  ```
  <canvas id="share-poster" type="2d" style="width: {{dWidth * dpr}}px; height: {{dHeight * dpr}}px; background: {{background}};"></canvas>
  ```
  dWidth: cavans宽度（单倍图）<br/>
  dHeight: cavans宽度（单倍图）<br/>
  dpr: 设备像素比<br/>
  background: canvas背景色(此背景色必须与creatPoster中canvasOptions.background背景色保持一致，否则会找到生成的海报黑屏)
  **若需要生成二维码，需添加以下代码**
  ```
  <canvas id="share-qrcode" type="2d" style="width: 200px; height: 200px"></canvas>
  ```
### wxss
  ```
  canvas {
    position: absolute;
    left: -20000px;
  }
  ```
### js
  ```
  import { createPoster, PosterType, savePoster, sharePoster } from 'weapp-canvas-poster';
  ```
  **PosterType canvas绘制元素类型**<br/>
  PosterType.Text: 文本类型<br/>
  PosterType.Image: 图片类型<br/>
  PosterType.QRCode: 二维码类型<br/>
  **createPoster 生成海报**<br/>
  ```
  createPoster({
    canvasId: '#share-poster',
    dpr: 2,
    canvasOptions: {
      background: '#fff', // 必须与canvas背景色保持一致，否则会找到生成的海报黑屏
    },
    list: [
      {
        type: PosterType.Text, // 文本类型
        x: dWidth / 2, // x坐标
        top: 24, // 距顶部距离（y坐标）
        lineHeight: 20, // 行高
        width: dWidth - 24, // 宽度
        fontSize: 14, // 字体大小
        fontWeight: 400, // 文本粗细
        fontFamily: 'PingFang', // 字体
        fillStyle: '#000', // 文字颜色
        textAlign: 'center', // 文本排列
        content: '我们是共产主义接班人！' // 文本内容
      },
      {
        type: PosterType.Image, 图片类型
        x: (dWidth - 101) / 2, // x坐标
        y: 30, // y坐标
        width: 101, // 宽度
        height: 33, // 高度
        src: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png' // 图片url
      },
      {
        type: PosterType.QRCode, // 二维码类型
        x: 80, // x坐标
        y: 80, // y坐标
        width: 160, // 宽度
        height: 160, // 高度
        src: "我们是共产主义接班人！", // 二维码内容
        logo: 'https://assets-img.myazstore.com/miniprogram/aoxingou/images/icons/logo.png', // 二维码logo
        canvasId: '#share-qrcode' // 二维码canvasId
      },
    ]
  }, this).then(filePath => {
    // filePath 绘制海报生成图片临时地址，用来展示
    this.setData({
      filePath
    })
  }).catch(err => {});
  ```
  **savePoster 保存图片**<br/>
  filePath: createPoster返回的图片临时地址
  ```
  savePoster(filePath).then((res) => {
    console.log(res);
  }).catch(() => {});
  ```
  **sharePoster 分享图片**<br/>
  filePath: createPoster返回的图片临时地址
  ```
  sharePoster(filePath).then((res) => {
    console.log(res);
  }).catch(() => {});
  ```

---
_Source: https://npm.io/package/weapp-canvas-poster · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._