資訊專欄INFORMATION COLUMN
摘要：無需任何第三方依賴，輕型工具庫。繪制海報，生成帶的二維碼。默認重新編輯最終圖片壓縮比，默認基礎類型參數表示一個圖片部分。之間表示一個二維碼部分參數類型描述指定為二維碼類型要繪制的內容。通過控制邊框顏色，默認為默認為容錯等級。
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 |
高階合成圖片
可以接受三個類型：圖片，文字，二維碼
| 參數 | 類型 | 描述 |
|---|---|---|
| options | object | MakeImageOptions（詳情請見，核心配置項） |
| callback | function | 回調參數：(error?: string, data?: string) => void |
生成編輯界面
可以接受三個類型：圖片，文字，二維碼
| 參數 | 類型 | 描述 |
|---|---|---|
| container | HTMLElement | 一個容器元素節點 |
| options | object | MakeImageOptions（詳情請見，核心配置項 |
| callback | function | 回調參數：(base64: string) => void |
繪圖核心配置項
| 參數 | 類型 | 描述 |
|---|---|---|
| parts | array | 各組成部分(ImageEntry , TextEntry , QRCodeEntry): 詳細見基礎類型參數 |
| width | number | 最終圖片寬度，建議為顯示容器的二倍 |
| height | number | 最終圖片高度，建議為顯示容器的二倍 |
| background | string | 畫布底色 |
| buttonText | string | 編輯模式下，繪制畫布按鈕文案：null時，隱藏按鈕。默認："繪制畫布" |
| resetButtonText | string | 編輯模式下，重新編輯按鈕文案：為空或null時，隱藏按鈕。默認："重新編輯" |
| compress | number | 最終圖片壓縮比，默認0.8 |
表示一個圖片部分。
| 參數 | 類型 | 描述 |
|---|---|---|
| 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參數 |
圖片剪切所需參數
| 參數 | 類型 | 描述 |
|---|---|---|
| x | number | 相對于左上角的水平坐標 |
| y | number | 相對于左上角的垂直坐標 |
| zoom | boolean | 等比縮放圖片 |
| align | string | 目前只支持"center";圖片正中間； |
表示一個文本部分。
| 參數 | 類型 | 描述 |
|---|---|---|
| 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 之間 |
表示一個二維碼部分
| 參數 | 類型 | 描述 |
|---|---|---|
| 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
閱讀需要支付1元查看
|
|---|