canvas繪製海報+二維碼，知足絕大部分場景

canvas_x

無需任何第三方依賴，輕型工具庫。
canvas繪製海報，生成帶logo的二維碼。也可生成編輯界面，用戶自定義輸入，一鍵生成等等

默認開啓圖片跨域，但服務端的圖片也須要後端進行相應的跨域設置。

項目地址

https://github.com/sayll/canvas_x

使用方法

npm 下載使用

npm i -S @sayll/canvas_x
// js 片斷
import canvas_x from '@sayll/canvas_x'
// TODO
canvas_x.makeImage({...})

直接引用

可直接經過script標籤引入lib/canvas_x.js，也可當第三方模塊引入。

經過script引入，可經過全局變量 canvas_x直接使用。詳情可見demo。

接口

函數	描述
makeImage(options, ...)	繪製一個圖片
renderEditor(container, options, callback)	建立編輯節點DOM

makeImage

高階合成圖片

能夠接受三個類型：圖片，文字，二維碼

參數	類型	描述
options	object	MakeImageOptions（詳情請見，核心配置項）
callback	function	回調參數：(error?: string, data?: string) => void

renderEditor

生成編輯界面

能夠接受三個類型：圖片，文字，二維碼

參數	類型	描述
container	HTMLElement	一個容器元素節點
options	object	MakeImageOptions（詳情請見，核心配置項
callback	function	回調參數：(base64: string) => void

MakeImageOptions

繪圖核心配置項

參數	類型	描述
parts	array	各組成部分(ImageEntry , TextEntry , QRCodeEntry): 詳細見基礎類型參數
width	number	最終圖片寬度，建議爲顯示容器的二倍
height	number	最終圖片高度，建議爲顯示容器的二倍
background	string	畫布底色
buttonText	string	編輯模式下，繪製畫布按鈕文案：null時，隱藏按鈕。默認：'繪製畫布'
resetButtonText	string	編輯模式下，從新編輯按鈕文案：爲空或null時，隱藏按鈕。默認：'從新編輯'
compress	number	最終圖片壓縮比，默認0.8

基礎類型參數

ImageEntry

表示一個圖片部分。

參數	類型	描述
type	string	指定爲圖片類型：'image'
url	string	要繪製的圖片地址，能夠是 http: 或 data: 格式
radius	number	半徑率，0-1之間
padding	number	內邊距。經過background控制邊框顏色，默認爲'#fff'
background	string	默認爲'#fff'
width	number	繪製的寬度
height	number	繪製的高度
editable	boolean	可否編輯，編輯模式下使用
selectImage	function	如需替換本身的資源爲替換圖片，可以使用此參數； 參數返回一個 callback 接受你替換的圖片 (base64或url) 注：當 editable 設置爲 true 時，selectImage 將阻止默認 input[type=file]選取圖片的默認行爲
x	number	相對於左上角的水平座標
y	number	相對於左上角的垂直座標
opacity	number	透明度。0-1 之間
clipOptions	object	詳細見ClipOptions參數

ClipOptions

圖片剪切所需參數

參數	類型	描述
x	number	相對於左上角的水平座標
y	number	相對於左上角的垂直座標
zoom	boolean	等比縮放圖片
align	string	目前只支持'center';圖片正中間；

TextEntry

表示一個文本部分。

參數	類型	描述
type	string	指定爲文本類型：'text'
text	string	要繪製的內容。使用 n 換行
size	string	字體大小
color	string	字體顏色
bold	boolean	是否加粗
textAlign	string	文本對齊方式，"center"、"left"、"right"，根據基準點（x,y）水平對齊。默認：'left'
lineAlign	string	文本對齊方式，"top"、"middle"、"bottom"，根據基準點（x,y）垂直對齊。默認：'top'
editable	boolean	可否編輯，編輯模式下使用
x	number	相對於左上角的水平座標
y	number	相對於左上角的垂直座標
opacity	number	透明度。0-1 之間

QRCodeEntry

表示一個二維碼部分

參數	類型	描述
type	string	指定爲二維碼類型：'qrcode'
text	string	要繪製的內容。網址須要使用 http: 開頭
padding	number	內邊距。經過background控制邊框顏色，默認爲'#fff'
background	string	默認爲'#fff'
level	number	容錯等級。1-5，數值越大容錯越高
logo	string	二維碼logo的地址,能夠是 http: 或 data: 格式
width	number	繪製的寬度
height	number	繪製的高度
x	number	相對於左上角的水平座標
y	number	相對於左上角的垂直座標
opacity	number	透明度。0-1 之間

開發命令

npm run <script>	note
build	打包文件
build:dev	監聽修改
browse	啓動server
start	start 整個項目server服務