1.0.6 • Published 3 years ago
react-poster v1.0.6
API
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|---|
| style | canvas 宽高及背景填充颜色 | 是 | Object | ||
| params | canvas内部图片文字及二维码显示 | 否 | Object | ||
| customCanvas | 自定义画布 | 否 | Function | ||
| canDownload | 下载 | 否 | Boolean | true | |
| fileName | 画布名称 | 否 | String | 海报 |
style
const style = {
width // 画布宽
height // 画布高
fillStyle // 画布填充色
}params
font 字体 // https://www.w3school.com.cn/tags/canvas_font.asp
fillStyle 文字颜色
text 文字内容
eleUrl 图片url
url 二维码url
Xaxis 设置X轴方向位置
Yaxis 设置Y轴方向位置text
//文字
const text = {
font: "48px PingFangSC-Medium",
fillStyle: "#181818",
fillText: {
text: "xxxxxxx",
Xaxis: 40,
Yaxis: 1058,
},
}eleImg
//图片
//
const eleImg = {
eleUrl: "https://img.alicdn.com/imgextra/i1/O1CN01SAJrzs1yAuZez4viA_!!6000000006539-0-tps-400-400.jpg",
Xaxis: 0,
Yaxis: 0,
width: 1600,
height: 1000,
}QRImg
// 二维码
const QRImg = {
url: "http://www.baidu.com",
Xaxis: 72,
Yaxis: 1310,
width: 130,
}customCanvas
const customCanvas = (context: any) => {
context.lineWidth = 10;
context.lineJoin = "round";
context.strokeStyle = "#00B8FF";
context.strokeRect(62, 1298, 150, 150);
};使用
<Poster
params={{
text: text,
eleImg: eleImg,
QRImg: QRImg,
}}
custom={customCanvas}
style={style}
/>