reactjs-canvas-poster

此组件适用于reactjs平台，使用canvas API生成海报。

主要特性

• 绘制矩形（圆角、旋转、边框、背景色）；
• 绘制图片（圆角、旋转、边框、背景色）；
• 绘制文本（换行、超出内容省略号、中划线、下划线、文本加粗、文字缩进、文字颜色）；
• 绘制二维码；
• 绘制渐变矩形；

使用 reactjs-canvas-poster 的理由

1. 简单： 使用类css属性的方式生成canvas图；
2. 易用： 通过npm或者yarn安装，简单上手；
3. 无依赖 无其他依赖库；
4. 高清 可通过widthPixels设置生成图片尺寸，解决图片模糊问题。

安装

npm install reactjs-canvas-poster --save

or

yarn add reactjs-canvas-poster

使用

import React, { useState } from 'react';

import CanvasPoster from 'reactjs-canvas-poster';

export default () => {
    const [imgurl, setImgUrl] = useState('');
    const [startDraw, setStartDraw] = useState(false);
    const [painting, setPainting] = useState([]);

    const generateShareImg = () => {
        const paintingData = {
            width: 300,
            height: 350,
            views: [
                {
                    type: 'rect',
                    width: 300,
                    height: 350,
                    top: 0,
                    left: 0,
                    background: 'white',
                    radius: 8,
                },
                {
                    type: 'text',
                    top: 30,
                    left: 15,
                    content: 'hellow reactjs-canvas-poster',
                    fontSize: 18,
                    lineHeight: 25,
                    width: 250,
                    breakWord: true,
                },
                {
                    type: 'text',
                    top: 60,
                    left: 15,
                    content: `作者：foxfly  2022-03-26`,
                    fontSize: 12,
                    lineHeight: 17,
                    width: 250,
                    breakWord: false,
                    MaxLineNumber: 1,
                    color: '#999',
                },
                {
                    type: 'image',
                    width: 270,
                    height: 126,
                    top: 90,
                    left: 15,
                    url: 'https://blogapi.mylifed.cn/storage/uploads/20211015/88eb2185b90010d857ca85ed3abb0abf.jpg',
                    radius: 6,
                },
                {
                    type: 'text',
                    top: 270,
                    left: 15,
                    content: `查看更多内容，请扫码~`,
                    fontSize: 12,
                    lineHeight: 17,
                    width: 70,
                    breakWord: true,
                    MaxLineNumber: 2,
                    color: '#999',
                },
                {
                    type: 'qrcode',
                    width: 80,
                    height: 80,
                    top: 240,
                    left: 200,
                    content: 'https://blogapi.mylifed.cn/foxfly',
                },
            ]
        };
        setPainting(paintingData);
        setStartDraw(true);
    };
    return (
        <div>
            <button onClick={() => generateShareImg()}>生成海报</button>

            {startDraw && <CanvasPoster painting={painting} onSuccess={(img) => setImgUrl(img)} />}
            <div style={{ textAlign: 'center', marginTop: 20 }}>
                {imgurl && <img src={imgurl} style={{ width: painting?.width, height: painting?.height }} />}
            </div>
        </div >
    );
};

API

react-canvas-poster组件属性

| 属性名 | 说明 | 默认值 | | :--- | :--- | :--- | | saveType | 保存类型（toDataURL / tempFilePath） | tempFilePath | | painting | 绘画数据，详细参数见 painting 参数说明 | [] | | onSuccess | 成功回调方法 | | | onFail | 失败回调方法 | |

painting 参数说明

| 属性名 | 说明 | | :--- | :--- | | width | canvas宽度 | | height | canvas高度 | | views | 绘画数据，详情见 views 参数说明 |

views 参数说明

| 属性名 | 说明 | 默认值 | | :--- | :--- | :--- | | type | 绘画类型（rect: 矩形; image: 图片; text: 文本; qrcode: 二维码; gradient: 渐变矩形; ） | 无 |

type: rect 参数说明

| 属性名 | 说明 | 参数类型 | 默认值 | | :--- | :--- | :--- | :--- | | left | x轴坐标 | Number | 0 | | top | y轴坐标 | Number | 0 | | width | 宽度 | Number | 0 | | height | 高度 | Number | 0 | | radius | 圆弧半径 | Number, Array | 0 or [0, 0, 0, 0] | | deg | 旋转角度 | Number | 0 | | border | 边框 | Array | 0 |

type: image 参数说明

| 属性名 | 说明 | 参数类型 | 默认值 | | :--- | :--- | :--- | :--- | | left | x轴坐标 | Number | 0 | | top | y轴坐标 | Number | 0 | | width | 宽度 | Number | 0 | | height | 高度 | Number | 0 | | radius | 圆弧半径 | Number, Array | 0 or [0, 0, 0, 0] | | deg | 旋转角度 | Number | 0 | | border | 边框 | Array | 0 | | img | 图片资源(本地资源或者网络资源) | Object, String | '' | | background | 背景颜色 | String | transparent |

type: text 参数说明

| 属性名 | 说明 | 参数类型 | 默认值 | | :--- | :--- | :--- | :--- | | left | x轴坐标 | Number | 0 | | top | y轴坐标 | Number | 0 | | width | 宽度 | Number | 0 | | content | 文本内容 | String | '' | | fontSize | 字体大小 | Number | 16 | | color | 文本颜色 | String | black | | textAlign | 文本对齐方式 | String | left。字体居中需要设置 left 值。比如：图片宽度 100,left:50,textAlign:'center' 即可居中 | | breakWord | 是否换行 | Boolean | false | | maxLineNumber | 最大行数 | Number | 默认：2。根据width(宽度)换行 ,需要设置 breakWord: true ,超出行隐藏显示为... | | bolder | 是否加粗 | Boolean | false | | textDecoration | 下划线装饰 | String | 下划线装饰 underline(下划线)、line-through(贯穿线) |

type: qrcode 参数说明

| 属性名 | 说明 | 参数类型 | 默认值 | | :--- | :--- | :--- | :--- | | left | x轴坐标 | Number | 0 | | top | y轴坐标 | Number | 0 | | width | 宽度 | Number | 0 | | height | 高度 | Number | 0 | | content | 二维码内容 | String | '' | | color | 码颜色 | String | black | | background | 背景颜色 | String | white |

type: gradient 参数说明

| 属性名 | 说明 | 参数类型 | 默认值 | | :--- | :--- | :--- | :--- | | left | x轴坐标 | Number | 0 | | top | y轴坐标 | Number | 0 | | width | 宽度 | Number | 0 | | height | 高度 | Number | 0 | | radius | 圆弧半径 | Number, Array | 0 or [0, 0, 0, 0] | | deg | 旋转角度 | Number | 0 | | gradType | 渐变类型 | String | 默认：linear（线性渐变）、radial（径向渐变） | | startCoordinate | 开始坐标 | Array | linear： (x0, y0)；radial： (x0, y0, r0) | | endCoordinate | 结束坐标 | Array | linear： (x1, y1)；radial： (x1, y1, r1) | | addColorArr | 填充的颜色值 | Array | [[0, 'green'], [.5, 'yellow'], [1, 'red']] |

预览

线上demo

注意事项

1. 此项目只支持reactjs平台项目。

FAQ

贡献代码

使用过程中发现任何问题都可以提Issue 给我，也非常欢迎 PR 或 Pull Request