GifBuilder 1.4.0

Inslallation

$ npm install gif-ness-canvas

Gifbuilder uses the same methods as Nessbuilder, whose documentation you will find here.

Infos

The only difference is that the gifbuilder takes into account the gif type image and therefore can generate GIF. The GIF generate reading size will depend on the reading size of the GIFs which has been given to it, more precisely it will take the longest unlest its change.

⚠️ If this does not suit you and you want certain features, you only have to ask, only according to the request that I would make appropriate changes

Quick Example

  const background = await loadImage('src/test/assets/image/background/background-3147808.jpg');
  const avatar = await loadImage('src/test/assets/image/avatar/witch.png');
  const gif = "src/test/assets/image/gif/stickMan.gif"
  const gif2 = "src/test/assets/image/gif/tvHS.gif"
  const gif3 = "src/test/assets/image/gif/nyan-cat-gif-1.gif"
  const image = await loadImage('https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg');
  
  const builder = new GifBuilder(700, 250)
    .setAxis("BottomRight")
    .setCornerRadius(15)
    .setBackground(background) // Add Backgr  ound
    .setImage(gif, {sx: 250, sy: 25, sWidth: 250, sHeight: 150})
    .setBanner({ location: { x: 25, y: 175 }, size: { height: 60, width: 200 }, outline: { color: "Navy", join: "miter", size: 5 }, Side: { extend: 20, n: 4 }}, { type: "Image", "content": gif3 })
    .setFrame("Square", { location:{x: 450, y: 125}, size: 50, Quadrilateral: { radius: 0}, outline: { size: 2, color: "Aquamarine"} }, { type: "Color", content: "HotPink"})
    .setFrame("Square", { location: { x: 25, y: 25 }, size: 80, outline: { color: "Brown", size: 2 } }, { type: "Image", content: avatar })
    .setFrame("Circle", { location: { x: 525, y: 25 }, size: 80, outline: { color: "Crimson", size: 2 } }, { type: "Image", content: image })
    .setFrame("Decagon", { location: { x: 275, y: 75 }, size: 80, outline: { color: "Fuchsia", size: 2 } }, { type: "Image", content: gif2 })

    .setEncoder({ algorithm: "neuquant", optimizer: false, quality: 30, repeat: 0})
  await builder.generatedTo("src/test/", "gifImage")
// console.log(await builder.toDataURL())
// console.log(await builder.toBuffer())

Result

setEncoder()

setEncoder<algo extends algorithm, bool extends boolean>(option: EncoderOptions<algo, bool>): this

Change GIF generation

• algorithm: neuquant or octree
• quality: Change gif quality 1-30 (30 = lowest)
• optimizer: Reusing color palette from previous frame on the current frame
• threshold: How similar the two images must be to trigger the optimizer (default 90%)
• repeat: Number of loops GIF does 0 is forever, anything else if literal number of loops (default 0)
• frameRate: Number of frames per second to display
• transparentColor: This color will be transparent (hex color only #FFFFFF)

• threshold => optimizer = true
• quality => algorith = neuquant

const { GifBuilder } = require('gif-ness-canvas')
const builder = new GifBuilder(250, 300)

...
.setEncoder({ algorithm: "neuquant", optimizer: false, quality: 30, repeat: 0, frameRate: 30})
...