- Installation
- NPM Module Required
- Canvas Dependencies Required
- Documentation
- Image Format
- Align Format
- Mod List
- Download the release from here
- Extract files and folder to your bot's directory actions folder
- Get all canvas dependencies from here
- Basic Section
- canvas
- glob
- node-fetch
- chalk
- chart.js
- GIF Section
- pixel-gif
- Font Section
- opentype.js
- Image Recognize Section
- tesseract.js
- Extension
- unzipper
- chalk
- node-fetch
- gifski https://github.com/ImageOptim/gifski/releases
- dwebp https://developers.google.com/speed/webp/download
- palette.js https://github.com/google/palette.js/blob/master/palette.js
- Image Options
- Crop Image
- Edit Border
- Filter Image
- Generate Progress Bar
- Image Recognize
- Generate Graph
DBM.Actions.Canvas.createImage(url, options) => Promise[Image]
Image type support png, jpg, gif webp(still image) and of course base64 image, it can be web image or local
- [String]
url
source image from local or url - [Object]
options
- [Integer]
delay
Delay for gif if image is animated - [Integer]
loop
Loop for gif if image is animated - [Integer]
overlap
Redraw gif by previous frame, value should be0
-2
,0
is Auto,1
is True and2
is False
- [Integer]
this.Canvas.createImage('https://www.website.com/image_**.png', { delay: 100, loop: 0, overlap: 0 }).then((image) => {
})
// or with async/await:
const image = await this.Canvas.createImage('.\resources\img.gif')
}
DBM.Actions.Canvas.drawImage(img1, img2, options) => [Image]
Draw img2 on top of img1 with ton of options
- [Image]
img1
img2
image generate from canvas - [Object]
options
- [Integer]
x
Position x of left of img1 - [Integer]
y
Position y of top of img1 - [Integer]
opacity
or name as transparent, which control img2 when it draw, not effect on img1, effective value range is from 0 to 100 - [Integer | String]
effect
draw effect for img2, exist value is'mask'
or1
, leave it empty for draw overlay - [Boolean]
expand
it will expand img1 size if img2 is large than img1
- [Integer]
this.Canvas.drawImage(img1 ,img2, { x: 5, y: 5, opacity: 100, expand: false })
DBM.Actions.Canvas.drawText(img, text, options) => [Image]
Draw text on above image with support font TrueType and OpenType
- [Image]
img
image generate from canvas - [String]
text
Text that will write on the image - [Object]
options
- [Integer]
x
Position x of img - [Integer]
y
Position y of img - [String]
color
Color of the text, example'#000000'
or'000000'
- [Integer]
size
Size of the font - [Integer | String]
align
Alignment for the text, value should be0
to8
or'TL'
,'TC'
,'TR'
,'ML'
,'BL'
... - [String]
type
Fill type, exist value is'fill'
or'stroke'
- [Integer]
maxWidth
Width from start of the text to end of it, if set to80
the width of text will below or equal to the maxWidth - [String]
font
The path of the font file - [Boolean]
antialias
anti alias for the text - [Boolean]
rotate
Rotate for the text, effective range should be0
-359
- [Boolean | Integer]
autoWrap
Auto wrap for text if text's width is bigger than max width, exist value is1
ortrue
, leave it blank to disable it
- [Integer]
this.Canvas.drawText(img, 'Hello World', { x: 5, y: 5, color: '#000000', size: 20, align: 'TL', type: 'fill', maxWidth: 40, font: 'fonts\arial.ttf', rotate: 180, antialias: true})
DBM.Actions.Canvas.controlImage(img, options) => [Image]
Control image function includes resize or scale, flip and rotate
- [Image]
img
image generate from canvas - [Object]
options
- [Object]
resize
Options for resize- [Integer]
width
width for the image - [Integer]
height
height for the image - [Boolean]
aspectRatio
Settrue
to keep the image look same after scale
- [Integer]
- [Integer | String]
flip
Flip image with 3 possible way,0
-3
orhorizontal
,vertical
anddiagonal
- [Integer]
rotate
Rotate the image, the width and the height will auto change to size after rotate - [Integer | String]
resampling
Resize image with resample method, exist value is0
to2
or'good'
|'bilinear'
,'best'
|'bicubic'
,'fast'
|'nearest'
- [Integer | String]
opacity
Control image opacity with value50%
for global opacity or use number between1
to255
for each pixel opacity
- [Object]
this.Canvas.controlImage(img, { resize: { width: 500, aspectRatio: true }, rotate: 90 })
DBM.Actions.Canvas.cropImage(img, options)
Crop image to smaller or bigger
- [Image]
img
image generate from canvas - [Object]
options
- [Integer | String]
width
Width of the new image size, example50
or'125%'
- [Integer | String]
height
Height of the new image size, example25
or'75%'
- [Integer | String]
align
Alignment for the cropping position, value should be0
to9
or'TL'
,'TC'
,'TR'
,'ML'
,'BL'
... - [Integer | String]
align2
Alignment for the cropping position, ifalign
value is9
, then this parameter is required, value should be0
to8
or'TL'
,'TC'
,'TR'
,'ML'
,'BL'
... - [Integer]
x
Position x for the alignment - [Integer]
y
Position y for the alignment
- [Integer | String]
this.Canvas.cropImage(img, { width: '50%', height: '50%', align: 9, align2: 4, x: 15, y: 25 })
DBM.Actions.Canvas.editBorder(img, type, radius) => [Image]
Edit image border to get a better look, bounder either is circle or round
- [Image]
img
image generate from canvas - [Integer | String]
type
Border type, circle type value is'circle'
|1
and round type is'corner'
or0
- [Integer]
radius
If border type iscorner
, this parameter is required
this.Canvas.editBorder(img , 'corner', 50)
DBM.Actions.Canvas.Filter(img, type, value) => [Image]
Add some filter to the image
- [Image]
img
image generate from canvas - [Integer | String]
type
Type for the filter, value should be0
-8
or'blur'
,'huerotate'
, 'brightness
', 'contrast
', 'grayscale
', 'invert
', 'opacity
', 'saturate
' and 'sepia
' - [Integer]
value
Total percent of the filter will add to image, effective range should be0
-100
this.Canvas.Filter(img, 'huerotate', 50)
DBM.Actions.Canvas.generateProgress(options, lineCap, lineWidth, percent, color) => [Image]
Generate progress bar from options and other info
- [Object]
options
- [Integer | String]
type
Type for progress bar, circle type value is'circle'
|1
and basic type is'basic'
,'normal
or0
- [Integer]
width
Width of progress bar if type isbasic
, else is radius forcircle
- [Integer]
height
Height of progress bar if type isbasic
, else if dimention for total width and height of the image forcircle
- [Integer | String]
- [Integer | String]
lineCap
Line cap for basic style is0
or'square'
and for round type is1
or'round'
- [Integer]
lineWidth
Line width is stroke width - [Integer]
percent
Percent available from0
to100
- [String]
color
Color of the progress bar, example'#000000'
or'000000'
this.Canvas.generateProgress({ type: 'circle', width: 100, height: 240 }, 'round', 20, 50, '#000000')
DBM.Actions.Canvas.Recognize(img, options) => Promise[String]
Text recognize from tesseract.js
- [Image]
img
image generate from canvas - [Object]
options
- [Integer]
left
Left of the rectangle that scan - [Integer]
top
Top of the rectangle that scan - [Integer]
width
Width of the rectangle - [Integer]
height
Height of the rectangle - [String]
lang
Target language, it can be'eng+chi_tra'
for English and Traditional Chinese - [Integer]
offset
Offset for the rectangle if max is more than 1 - [String]
offsetType
Offset type for the offset value, value should be'percentage'
,'percent'
,'pixel'
and'px'
- [Integer]
max
Max try for each image, the more try doesnt mean will have better result - [Boolean]
forceMax
If found a perfect result andforceMax
is false, it will stop the work
- [Integer]
this.Canvas.Recognize(img, { left: 0, top: 0, width: 200, height: 200, lang: 'eng', offset: 5, offsetType: 'pixel', max: 3, forceMax: false, acceptRange: 80, forceAccept: true, debug: false })
DBM.Actions.Canvas.generateChart(type, width, height, title, labels, data, sort, bgColor, bgColorAlpha, borderWidth, borderColor, borderColorAlpha, options) => [Image]
Generate many type of graph with chart.js
- [String]
type
Type of graph, value should be 'line
','bar'
, 'horizontalBar
', 'radar
', 'pie
', 'doughnut
' and 'polarArea
' - [Integer]
width
Width for the image - [Integer]
height
Height for the image - [String]
title
Title of the graph - [Array]
labels
An array of all labels, example['bar1', 'bar2', 'bar3']
- [Array]
data
An array of all data, example[10,20,30]
- [Integer]
sort
Sort for result, value should be0
,1
or2
- [String]
bgColor
Color of the object, example'222831,00adb5,eeeeee'
- [Integer]
bgColorAlpha
Control object's opacity with value between0
to1
- [Integer]
borderWidth
Border's width of the object - [String]
borderColor
Border's color of the object, example'222831,00adb5,eeeeee'
- [Integer]
borderColorAlpha
Control border object's opacity with value between0
to1
- [Object]
option
Please check at Chart.js
this.Canvas.generateChart('bar', 800, 400, 'Score', ['Team Red', 'Team Blue', 'Team Green'], [33, 66, 99], 2, , 0.1, 1, , 1, {})
DBM.Actions.Canvas.toBuffer(img) => [Buffer]
Convert gif/still image to buffer
- [Image]
img
image generate from canvas
const buffer = DBM.Actions.Canvas.toBuffer(img)
DBM.Actions.Canvas.Export(img, destination)
Save gif/still image to local directly
- [Image]
img
image generate from canvas - [String]
destination
local path for image
const buffer = DBM.Actions.Canvas.Export(img, 'resources\\export.png')
DBM.Actions.Canvas.toAttachment(img ,name) => [Discord Attachment]
Convert image to discord attachment
- [Image]
img
image generate from canvas - [String]
name
name for the attachment, example'image.png'
or'image'
this.Canvas.toAttachment(img, 'image')
DBM.Actions.Canvas.bridge(img, type) => Promise[image]
Function convert Canvas image to Jimp image or Jimp image to Canvas image
- [Image]
img
target image - [Integer]
type
value for (C->J) is0
and (J->C) is blank or any number that value is not0
this.Canvas.bridge(img, 1).then((image) => {
})
// or with async/await:
const image = await this.Canvas.bridge(img, 0)
}
- Still Image
- [Object] Type
- [Boolean]
animated
Is animated, default value isfalse
- [Array]
extensions
possible of image extension - [Image]
image
image with base64 format, it should start withdata:image/png;base64
- [Boolean]
- Mainly format from
png
,jpg
,webp
, orbase64
- [Object] Type
- Animated/GIF Image
- [Object] Type
- [Integer]
width
Width of the gif - [Integer]
height
Height of the gif - [Boolean]
animated
Is animated, default value istrue
- [Array]
extensions
possible of image extension - [Array]
images
Array images of the gif- [Image]
img
image generate from canvas
- [Image]
- [Integer]
delay
Delay for the each frame - [Integer]
loopCount
Loop for the gif, if it is0
, mean infinity loop - [Integer]
totalFrames
Total frames in this gif image
- [Integer]
- Mainly format from
gif
or multiple local png image
- [Object] Type
- [Integer] Type 1
align
valid from0
to8
- [String] Type 2
align
valid values'TL'
,'TC'
,'TR'
,'ML'
,'MC'
,'MR'
,'BL'
,'BC'
and'BR'
- Canvas Create Image
- Canvas Create Background
- Canvas Crop Image
- Canvas Draw Image on Image
- Canvas Draw Text on Image
- Canvas Edit Image Border
- Canvas Generate Progress Bar
- Canvas Gif to Png
- Canvas Image Bridge
- Canvas Image Filter
- Canvas Image Options
- Canvas Image Recognize
- Canvas Save Image
- Canvas Send Image
- Canvas Set Gif Option
- Store Canvas Info
- Canvas Generate Graph
- About Canvas Mod