responsive-poster-react

一个在react框架下利用canvas生成海报的简单组件
A simple REACT component for generating posters

图 1

feature

  • Take advantage of the simple json-like object to easily use
  • With a given area as frame, the image (for example, the NFT image) in it will be automatically positioned and resized to the most suitable place for displaying .
  • 通过传入简单的类json数据来轻松使用
  • 通过先给定的数据设置相框区域，传入相框内的图片会自动定位并调整大小到最适宜展示的程度

install, import & use

npm i responsive-poster-react
import Poster from 'responsive-poster-react';
<Poster posterData={posterData} />

tips: the ‘responsiveImage’ item must be set after the ‘rect’ item to activate the automation
提示：数组中的responsiveImage对象必须被放置在rect对象之后来启用自动定位和调整大小

demo数据例子（点击展开） 

import bg from './assets/poster_zh.png'
import error from './assets/error.png'
import test from './assets/test.jpg'

const posterData = {
	error: error,
	exportHeight: 740, // true height of the exported image
	cw: 4689, //canvas width
	ch: 7364, //canvas height
	bgColor: '#808080', //background color
	drawData: [
		{
			type: 'staticImage', //background image
			url: bg,
			left: 0,
			top: 0,
			width: 4689,
			height: 7363,
			
		}, //
		{
			type: 'text', //
			content: '1024',
			width: 800,
			top: 6050,
			left: 450,
			fontSize: 260,
			fontWeight: 'bold',
			color: '#0043a5',
		}, //
		{
			type: 'text',
			content: 'Shinomiya',
			top: 4550,
			left: 2344.5,
			fontSize: 200,
			textAlign: 'center',
			fontWeight: 'bold',
			color: '#000'
		},
		{
			type: 'rect',
			left: 200,
			top: 1200,
			width: 4289,
			height: 2930,
			borderRadius: 200,
			borderColor: '#ff0000',
			opacity: 1,

		},
		{
			type: 'responsiveImage',
			url: test
		},
		{
			type: 'qrcode',
			url: 'http://localhost:3001/',
			left: 3590,
			top: 6350,
			width: 710,
			height: 710
		}
	]
}


const App = () => <Poster
				posterData={posterData}
				/>
render(<App />, document.getElementById('root'))

params

posterData

key notes type default value required
cw the canvas width Number yes
ch the canvas height Number yes
bgColor the canvas background color String #ffffff no
error the default image if the image load failed url yes
exportHeight the exported image height, as the width will be auto Number yes
drawData the main data as below Array yes

drawData

An array of objects and each item can be one of the following:

type: text

draw a line of text

key notes type default value required
type must be ‘text’ String yes
top the distance between the image top edge and the canvas top edge Number 0 no
left the distance between the image left edge and the canvas left edge Number 0 no
fontSize – Number 16 no
color – String ‘#000’ no
baseLine choose the base line among ‘top’, ‘left’, ‘right’, ‘bottom’ String ‘bottom’ no
textAlign ‘left’, ‘right’ or ‘center’ String ‘center’ no
content the text content to be displayed String yes
opacity – Number 1 no
fontWeight – String or Number ‘normal’ no
fontStyle ‘normal’, ‘italic’, ‘small-caps’ or ‘normal’ etc. String ‘normal’ no
fontFamily – String ‘Microsoft YaHei’ no
type:line

draw a line

key notes type default value required
type must be ‘line’ String yes
startX the x value (same as ‘left’ above) of the start of the line Number yes
startY the y value (same as ‘top’ above) of the start of the line Number yes
endX the x value of the end of the line Number yes
endY the y value of the end of the line Number yes
color – String ‘#000’ no
width line width Number 1 no
lineCap same as the css property ‘stroke-linecap’ String ‘butt’ no
type: staticImage

draw a image

key notes type default value required
type must be ‘staticImage’ String yes
url the image URI String yes
top same as above Number 0 no
left same as above Number 0 no
width set the width of the image Number 0 no
height set the height of the image Number 0 no
borderRadius same as the css property ‘border-radius’ Number 0 no
borderWidth same as the css property ‘border-width’ Number 0 no
borderColor same as the css property ‘border-color’ String ‘rgba(255,255,255,1)’ no
type: qrcode

draw a qrcode

key notes type default value required
type must be ‘staticImage’ String yes
url the string to be transferred to qrcode String yes
top same as above Number 0 no
left same as above Number 0 no
width set the width of the image Number 0 no
height set the height of the image Number 0 no
borderRadius same as the css property ‘border-radius’ Number 0 no
borderWidth same as the css property ‘border-width’ Number 0 no
borderColor same as the css property ‘border-color’ String ‘rgba(255,255,255,1)’ no
type: rect

draw a rectangle or a frame to display

key notes type default value required
type must be ‘rect’ String yes
width – Number 0 no
height – Number 0 yes
left – Number 0 yes
top – Number 0 yes
backgroundColor – String no
borderWidth same as the css property ‘border-width’ Number 0 no
borderColor same as the css property ‘border-color’ String ‘#000’ no
borderRadius same as the css property ‘border-radius’ Number 0 no
opacity – Number 1 no

tips: the ‘responsiveImage’ item must be set after the ‘rect’ item to activate the automation

type: responsiveImage

draw a responsive image that can be automatically positioned and resized

key notes type default value required
type must be ‘responsiveImage’ String yes
url the image uri String yes

GitHub

View Github