canvas_x
No need for any third-party dependence, light tool library.
Canvas draws posters and generates two-dimensional codes with logo. Can also generate editing interface, user-defined input, one-button generation, etc.
By default, cross-domain images are turned on, but the images on the server side also need corresponding cross-domain settings on the back end.
Project address
Use method
Npm download and use
npm i -S @sayll/canvas_x
// js 片段
import canvas_x from '@sayll/canvas_x'
// TODO
canvas_x.makeImage({...})
Direct reference
Can be directly introduced through the script taglib/canvas_x.js
, or when a third-party module is introduced.
Through the introduction of script, through global variables
canvas_x
Direct use. Details can be found in demo.
Interface
Function | describe |
---|---|
makeImage(options, …) | Draw a picture |
renderEditor(container, options, callback) | Create edit node DOM |
makeImage
High order composite picture
Can accept three types: picture, text, two-dimensional code
Parameter | Type | describe |
---|---|---|
options | object | MakeImageOptions(For details, see Core Configuration Items) |
callback | function | Callback parameters: (error? : string, data? : string) => void |
renderEditor
Generate edit interface
Can accept three types: picture, text, two-dimensional code
Parameter | Type | describe |
---|---|---|
container | HTMLElement | A container element node |
options | object | MakeImageOptions(For details, see Core Configuration Items |
callback | function | Callback parameters: (base64: string) => void |
MakeImageOptions
Drawing Core Configuration Items
Parameter | Type | describe |
---|---|---|
parts | array | Each component (ImageEntry,TextEntry,QRCodeEntry): See the basic type parameter for details |
width | number | The width of the final picture is recommended to be twice that of the display container. |
height | number | The height of the final picture is recommended to be twice that of the display container. |
background | string | Canvas background |
buttonText | string | In edit mode, draw canvas button copy: when null, hide the button. Default:’ Draw Canvas’ |
resetButtonText | string | In edit mode, re-edit the button copy: hide the button when it is empty or null. Default:’ Re-edit’ |
compress | number | Final image compression ratio, default 0.8 |
Basic type parameter
ImageEntry
Indicates a picture part.
Parameter | Type | describe |
---|---|---|
type | string | Specify as picture type:’ image’ |
url | string | The address of the picture to be drawn can be in http: or data: format. |
radius | number | Radius ratio, 0-1 |
padding | number | Inner margin. Control border color through background, default is’ #fff’ |
background | string | The default is’ #fff’ |
width | number | Drawn width |
height | number | Drawn height |
editable | boolean | Can I edit, use in edit mode |
selectImage | function | If you need to replace your own resources with replacement pictures, you can use this parameter. Parameter returns a callback to accept the picture you replace (base64 or url). note: when editable is set to true, selectImage will prevent the default input[type=file] from selecting the picture. |
x | number | Horizontal coordinate relative to upper left corner |
y | number | The vertical coordinate relative to the upper left corner. |
opacity | number | Transparency. Between 0 and 1 |
clipOptions | object | See in detailClipOptionsParameter |
ClipOptions
Parameters Required for Picture Cutting
Parameter | Type | describe |
---|---|---|
x | number | Horizontal coordinate relative to upper left corner |
y | number | The vertical coordinate relative to the upper left corner. |
zoom | boolean | Isometric scaling of pictures |
align | string | Currently only’ center’ is supported; The picture is in the middle. |
TextEntry
Represents a text part.
Parameter | Type | describe |
---|---|---|
type | string | Specify as text type:’ text’ |
text | string | What to draw. Use n line feed |
size | string | Font size |
color | string | Font color |
bold | boolean | Bold or not |
textAlign | string | Text alignment, “center”, “left” and “right” are aligned horizontally according to the reference point (x,y). Default:’ left’ |
lineAlign | string | Text alignment, “top”, “middle” and “bottom” are vertically aligned according to the reference point (x,y). Default:’ top’ |
editable | boolean | Can I edit, use in edit mode |
x | number | Horizontal coordinate relative to upper left corner |
y | number | The vertical coordinate relative to the upper left corner. |
opacity | number | Transparency. Between 0 and 1 |
QRCodeEntry
Represents a two-dimensional code part
Parameter | Type | describe |
---|---|---|
type | string | Specify as qrcode Type:’ QR Code’ |
text | string | What to draw. The web address needs to start with http: |
padding | number | Inner margin. Control border color through background, default is’ #fff’ |
background | string | The default is’ #fff’ |
level | number | Fault tolerance level. 1-5, the higher the value, the higher the fault tolerance. |
logo | string | The address of the two-dimensional code logo can be in http: or data: format. |
width | number | Drawn width |
height | number | Drawn height |
x | number | Horizontal coordinate relative to upper left corner |
y | number | The vertical coordinate relative to the upper left corner. |
opacity | number | Transparency. Between 0 and 1 |
Development order
npm run <script> |
note |
---|---|
build |
Package file |
build:dev |
Monitor modification |
browse |
Start server |
start |
Start entire project server service |