資訊專(zhuān)欄INFORMATION COLUMN
摘要：無(wú)需任何第三方依賴(lài)，輕型工具庫(kù)。繪制海報(bào)，生成帶的二維碼。默認(rèn)重新編輯最終圖片壓縮比，默認(rèn)基礎(chǔ)類(lèi)型參數(shù)表示一個(gè)圖片部分。之間表示一個(gè)二維碼部分參數(shù)類(lèi)型描述指定為二維碼類(lèi)型要繪制的內(nèi)容。通過(guò)控制邊框顏色，默認(rèn)為默認(rèn)為容錯(cuò)等級(jí)。
canvas_x
無(wú)需任何第三方依賴(lài)，輕型工具庫(kù)。
canvas繪制海報(bào)，生成帶logo的二維碼。也可生成編輯界面，用戶(hù)自定義輸入，一鍵生成等等
默認(rèn)開(kāi)啟圖片跨域，但服務(wù)端的圖片也需要后端進(jìn)行相應(yīng)的跨域設(shè)置。項(xiàng)目地址
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({...})
直接引用
可直接通過(guò)script標(biāo)簽引入lib/canvas_x.js，也可當(dāng)?shù)谌侥K引入。
通過(guò)script引入，可通過(guò)全局變量canvas_x直接使用。詳情可見(jiàn)demo。接口
| 函數(shù) | 描述 |
|---|---|
| makeImage(options, ...) | 繪制一個(gè)圖片 |
| renderEditor(container, options, callback) | 創(chuàng)建編輯節(jié)點(diǎn)DOM |
高階合成圖片
可以接受三個(gè)類(lèi)型：圖片，文字，二維碼
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| options | object | MakeImageOptions（詳情請(qǐng)見(jiàn)，核心配置項(xiàng)） |
| callback | function | 回調(diào)參數(shù)：(error?: string, data?: string) => void |
生成編輯界面
可以接受三個(gè)類(lèi)型：圖片，文字，二維碼
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| container | HTMLElement | 一個(gè)容器元素節(jié)點(diǎn) |
| options | object | MakeImageOptions（詳情請(qǐng)見(jiàn)，核心配置項(xiàng) |
| callback | function | 回調(diào)參數(shù)：(base64: string) => void |
繪圖核心配置項(xiàng)
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| parts | array | 各組成部分(ImageEntry , TextEntry , QRCodeEntry): 詳細(xì)見(jiàn)基礎(chǔ)類(lèi)型參數(shù) |
| width | number | 最終圖片寬度，建議為顯示容器的二倍 |
| height | number | 最終圖片高度，建議為顯示容器的二倍 |
| background | string | 畫(huà)布底色 |
| buttonText | string | 編輯模式下，繪制畫(huà)布按鈕文案：null時(shí)，隱藏按鈕。默認(rèn)："繪制畫(huà)布" |
| resetButtonText | string | 編輯模式下，重新編輯按鈕文案：為空或null時(shí)，隱藏按鈕。默認(rèn)："重新編輯" |
| compress | number | 最終圖片壓縮比，默認(rèn)0.8 |
表示一個(gè)圖片部分。
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| type | string | 指定為圖片類(lèi)型："image" |
| url | string | 要繪制的圖片地址，可以是 http: 或 data: 格式 |
| radius | number | 半徑率，0-1之間 |
| padding | number | 內(nèi)邊距。通過(guò)background控制邊框顏色，默認(rèn)為"#fff" |
| background | string | 默認(rèn)為"#fff" |
| width | number | 繪制的寬度 |
| height | number | 繪制的高度 |
| editable | boolean | 能否編輯，編輯模式下使用 |
| selectImage | function | 如需替換自己的資源為替換圖片，可使用此參數(shù)； 參數(shù)返回一個(gè) callback 接受你替換的圖片 (base64或url) 注：當(dāng) editable 設(shè)置為 true 時(shí)，selectImage 將阻止默認(rèn) input[type=file]選取圖片的默認(rèn)行為 |
| x | number | 相對(duì)于左上角的水平坐標(biāo) |
| y | number | 相對(duì)于左上角的垂直坐標(biāo) |
| opacity | number | 透明度。0-1 之間 |
| clipOptions | object | 詳細(xì)見(jiàn)ClipOptions參數(shù) |
圖片剪切所需參數(shù)
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| x | number | 相對(duì)于左上角的水平坐標(biāo) |
| y | number | 相對(duì)于左上角的垂直坐標(biāo) |
| zoom | boolean | 等比縮放圖片 |
| align | string | 目前只支持"center";圖片正中間； |
表示一個(gè)文本部分。
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| type | string | 指定為文本類(lèi)型："text" |
| text | string | 要繪制的內(nèi)容。使用 n 換行 |
| size | string | 字體大小 |
| color | string | 字體顏色 |
| bold | boolean | 是否加粗 |
| textAlign | string | 文本對(duì)齊方式，"center"、"left"、"right"，根據(jù)基準(zhǔn)點(diǎn)（x,y）水平對(duì)齊。默認(rèn)："left" |
| lineAlign | string | 文本對(duì)齊方式，"top"、"middle"、"bottom"，根據(jù)基準(zhǔn)點(diǎn)（x,y）垂直對(duì)齊。默認(rèn)："top" |
| editable | boolean | 能否編輯，編輯模式下使用 |
| x | number | 相對(duì)于左上角的水平坐標(biāo) |
| y | number | 相對(duì)于左上角的垂直坐標(biāo) |
| opacity | number | 透明度。0-1 之間 |
表示一個(gè)二維碼部分
| 參數(shù) | 類(lèi)型 | 描述 |
|---|---|---|
| type | string | 指定為二維碼類(lèi)型："qrcode" |
| text | string | 要繪制的內(nèi)容。網(wǎng)址需要使用 http: 開(kāi)頭 |
| padding | number | 內(nèi)邊距。通過(guò)background控制邊框顏色，默認(rèn)為"#fff" |
| background | string | 默認(rèn)為"#fff" |
| level | number | 容錯(cuò)等級(jí)。1-5，數(shù)值越大容錯(cuò)越高 |
| logo | string | 二維碼logo的地址,可以是 http: 或 data: 格式 |
| width | number | 繪制的寬度 |
| height | number | 繪制的高度 |
| x | number | 相對(duì)于左上角的水平坐標(biāo) |
| y | number | 相對(duì)于左上角的垂直坐標(biāo) |
| opacity | number | 透明度。0-1 之間 |
| npm run
閱讀需要支付1元查看
|
|---|