在閱讀文章的時候,如果能一鍵生成一張該文章的海報圖片,那分享效果會大大提高。
基於此,我寫了一個基於canvas生成海報的js庫。github地址
效果圖
使用說明
最簡單的使用配置:
// html
<div class="poster"></div>
// js
poster.init({
banner: './images/dream.png',
selector: '.poster',
title: '...',
content: '...',
logo: '...',
description: '...',
callback: function(container) {...}
})
複製程式碼
其他配置:
// html
<div class="poster"></div>
// js
poster.init({
banner: './images/mountain.jpg',
selector: '.poster',
title: '...',
titleStyle: {
font: 'bold italic 50px Arial',
color: 'rgba(66, 66, 66, 1)'
},
content: '...',
contentStyle: {
font: 'italic 24px Arial',
lineHeight: 1.2,
position: 'center',
color: 'rgba(88, 88, 88, 1)'
},
logo: '...',
logoStyle: {
color: 'rgba(0, 0, 120, 1)'
},
description: '...',
callback: function(container) {...}
})
複製程式碼
通過上面的例子可以看到,只要把需要的標題、內容、圖片連結和logo文字說明寫上,即可生成一張漂亮的海報。
後續
之後,還會加上更多的樣式。歡迎star和fork(github地址)