reactjs-canvas-poster v1.0.0

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组件属性

painting 参数说明

views 参数说明

type: rect 参数说明

type: image 参数说明

type: text 参数说明

type: qrcode 参数说明

type: gradient 参数说明

预览

线上demo

注意事项

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

FAQ

贡献代码

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