Canvas draws posters+two-dimensional codes to satisfy most scenes

  canvas, Front end, javascript, qrcode, web

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

https://github.com/sayll/canvas_x

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 variablescanvas_xDirect 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