Skip to content

A Canvas mod made for Discord Bot Maker (DBM) Software

License

Notifications You must be signed in to change notification settings

LeonZ2019/dbm-canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Discord Bot Maker Canvas Mod

Image mod interact with default image action

Installation Guide

  • Download the release from here
  • Extract files and folder to your bot's directory actions folder
  • Get all canvas dependencies from here

NPM Module Required

  • 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

Canvas Dependencies Required

Documentation

Basic Image Manipulate

Advanced Image Manipulate

Others

Create Image

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 be 0 - 2, 0 is Auto, 1 is True and 2 is False
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')
}

Draw Image

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' or 1, leave it empty for draw overlay
    • [Boolean] expand it will expand img1 size if img2 is large than img1
this.Canvas.drawImage(img1 ,img2, { x: 5, y: 5, opacity: 100, expand: false })

Draw Text

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 be 0 to 8 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 to 80 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 be 0 - 359
    • [Boolean | Integer] autoWrap Auto wrap for text if text's width is bigger than max width, exist value is 1 or true, leave it blank to disable it
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})

Image Options

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 Set true to keep the image look same after scale
    • [Integer | String] flip Flip image with 3 possible way, 0 - 3 or horizontal, vertical and diagonal
    • [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 is 0 to 2 or 'good' | 'bilinear', 'best' | 'bicubic', 'fast' | 'nearest'
    • [Integer | String] opacity Control image opacity with value 50% for global opacity or use number between 1 to 255 for each pixel opacity
this.Canvas.controlImage(img, { resize: { width: 500, aspectRatio: true }, rotate: 90 })

Crop Image

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, example 50 or '125%'
    • [Integer | String] height Height of the new image size, example 25 or '75%'
    • [Integer | String] align Alignment for the cropping position, value should be 0 to 9 or 'TL', 'TC', 'TR', 'ML', 'BL'...
    • [Integer | String] align2 Alignment for the cropping position, if align value is 9, then this parameter is required, value should be 0 to 8 or 'TL', 'TC', 'TR', 'ML', 'BL'...
    • [Integer] x Position x for the alignment
    • [Integer] y Position y for the alignment
this.Canvas.cropImage(img, { width: '50%', height: '50%', align: 9, align2: 4, x: 15, y: 25 })

Edit Border

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' or 0
  • [Integer] radius If border type is corner, this parameter is required
this.Canvas.editBorder(img , 'corner', 50)

Filter Image

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 be 0 - 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 be 0 - 100
this.Canvas.Filter(img, 'huerotate', 50)

Generate Progress Bar

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 or 0
    • [Integer] width Width of progress bar if type is basic, else is radius for circle
    • [Integer] height Height of progress bar if type is basic, else if dimention for total width and height of the image for circle
  • [Integer | String] lineCap Line cap for basic style is 0 or 'square' and for round type is 1 or 'round'
  • [Integer] lineWidth Line width is stroke width
  • [Integer] percent Percent available from 0 to 100
  • [String] color Color of the progress bar, example '#000000' or '000000'
this.Canvas.generateProgress({ type: 'circle', width: 100, height: 240 }, 'round', 20, 50, '#000000')

Image Recognize

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 and forceMax is false, it will stop the work
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 })

Generate Graph

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 be 0, 1 or 2
  • [String] bgColor Color of the object, example '222831,00adb5,eeeeee'
  • [Integer] bgColorAlpha Control object's opacity with value between 0 to 1
  • [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 between 0 to 1
  • [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, {})

Image Buffer

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)

Save Image Local

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')

Discord Attachment

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')

Image Bridge

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) is 0 and (J->C) is blank or any number that value is not 0
this.Canvas.bridge(img, 1).then((image) => {
})

// or with async/await:
const image = await this.Canvas.bridge(img, 0)
}

Image Format

  • Still Image
    • [Object] Type
      • [Boolean] animated Is animated, default value is false
      • [Array] extensions possible of image extension
      • [Image] image image with base64 format, it should start with data:image/png;base64
    • Mainly format from png, jpg, webp, or base64
  • Animated/GIF Image
    • [Object] Type
      • [Integer] width Width of the gif
      • [Integer] height Height of the gif
      • [Boolean] animated Is animated, default value is true
      • [Array] extensions possible of image extension
      • [Array] images Array images of the gif
        • [Image] img image generate from canvas
      • [Integer] delay Delay for the each frame
      • [Integer] loopCount Loop for the gif, if it is 0, mean infinity loop
      • [Integer] totalFrames Total frames in this gif image
    • Mainly format from gif or multiple local png image

Align Format

  • [Integer] Type 1
    • align valid from 0 to 8
  • [String] Type 2
    • align valid values 'TL', 'TC', 'TR', 'ML', 'MC', 'MR', 'BL', 'BC' and 'BR'

Mod List

  1. Canvas Create Image
  2. Canvas Create Background
  3. Canvas Crop Image
  4. Canvas Draw Image on Image
  5. Canvas Draw Text on Image
  6. Canvas Edit Image Border
  7. Canvas Generate Progress Bar
  8. Canvas Gif to Png
  9. Canvas Image Bridge
  10. Canvas Image Filter
  11. Canvas Image Options
  12. Canvas Image Recognize
  13. Canvas Save Image
  14. Canvas Send Image
  15. Canvas Set Gif Option
  16. Store Canvas Info
  17. Canvas Generate Graph
  18. About Canvas Mod