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