写在前面

业务需要在PC+wap页面上动态生成一张海报图片，于是便有了这个基于React绘制海报的组件 (҂‾ ▵‾)σ(˚▽˚’!)/
github地址

react-canvas-poster

一个基于react+canvas通过类CSS数据生成canvas图片的组件
(･(ง •_•)งﾟ✧ A super easy create canvas poster for React!)

生成效果

生成一个简单海报图片

安装

npm i react-canvas-poster

使用组件

注册

import CanvasPoster from 'react-canvas-poster';

使用

<CanvasPoster drawData={this.state.drawData} success={this.success.bind(this)}/>

// return base64类型图片文件
success(res) {}

demo数据例子

     {
        width: 360,
        height: 667,
        backgroundColor: '#fff',
        views: [
          // 绘制本地图片
          {
            type: 'image',
            url: require('./assets/bold.png'), // 远程图片可以直接改为图片地址
            top: 0,
            left: 0,
            width: 360,
            height: 667,
          },
          // 绘制带圆角+边框的图片
          {
            type: 'image',
            url: require('./assets/header.jpg'),
            top: 58,
            left: 165,
            width: 30,
            height: 30,
            borderRadius: 5,
            borderWidth: 2,
            borderColor: '#f0efefea',
          },
          // 绘制文字
          {
            type: 'text',
            content: 'react-canvas-poster简单快速的绘制canvas海报~~这是一段比较长的标题文字',
            fontSize: 14,
            color: '#f7f7f7',
            textAlign: 'center',
            top: 262,
            left: 180,
            width: 200,
            lineNum: 3,
            lineHeight: 20,
            baseLine: 'top',
          },
          // 绘制一条分割线
          {
            type: 'line',
            color: '#999',
            startX: 30,
            startY: 580,
            endX: 330,
            endY: 580,
            width: 2,
            lineCap: 'round',
          },
          // 绘制一个简易矩形
          {
            type: 'rect',
            width: 200,
            height: 200,
            x: 20,
            y: 50,
            paddingLeft: 10,
            paddingRight: 10,
            backgroundColor: '#fff',
          },
      }

API

drawData（数据）

image字段（绘制图片）

text字段（绘制文字）

line字段（绘制线段）

rect字段（绘制矩形 内部可添加文字）

方法

success(src) {
  // 返回base64图片
  console.log(src)
}

注意

关于canvas图片跨域

图片跨域暂时未完全解决，远程图片地址推荐使用同域名，不然会报错

相关参考

1. vue-canvas-poster 作者：也是俺自己
2. canvas图片跨域怎么办
3. wxa-plugin-canvas 作者：jasondu
4. 绘制圆角矩形 作者：YvetteLau
5. 贝塞尔曲线 作者：hujiulong

持续开发中的功能...

• box-shadow 绘制阴影
• QrCode 绘制二维码
• Bezier curve 贝塞尔曲线
• 可选类型图片导出
• ...

如果你觉得这个项目有趣 不妨给个star~ (҂‾ ▵‾)σ(˚▽˚’!)/

给我star~

交流

有什么意见,或者bug 或者想一起开发react-canvas-poster

我的微信

ISS

提iss