Custom parameters into canvas

Hello everyone,

I have fork the project and add the possibility to share parameters from editly to canvas, The change is on this branch : https://github.com/cDelage/editly/tree/canvas-parameters the sources changed are : https://github.com/cDelage/editly/blob/canvas-parameters/sources/fabric.js, https://github.com/cDelage/editly/blob/canvas-parameters/sources/frameSource.js

and i add an example : https://github.com/cDelage/editly/blob/canvas-parameters/examples/customCanvasWithParameters.js

it seems to work but I don't have sufficient knowledge of the tool to measure the impacts...

But i think it's usefull, for example :

async function myFunc({ canvas }) {
    async function onRender(progress, canvasArgs, offsetTime) {
      const context = canvas.getContext('2d');    
      await loadImage(canvasArgs.url).then((image) => {
        context.drawImage( image, 0, 0, image.width, image.height, pos.x, pos.y, newSizes.width, newSizes.height)
      })
    }
    function onClose() {
      // Cleanup if you initialized anything
    }
    return { onRender, onClose };
  }

editly({
  outPath: './build/test.mp4',
  width: 1280,
  height: 720,
  clips: [
  outPath: './build/test.mp4',
  width: 1280,
  height: 720,
  clips: [
    { duration: 5,
      layers: [
        { type: 'canvas',
          func: myFunc , 
          //Any parameters to fill into canvas
          canvasArgs : {
          url : '../assets/image.jpg'
          }
        }
      ] },
    { duration: 5,
      layers: [
        { type: 'canvas',
          func: myFunc , 
          //Any parameters to fill into canvas
          canvasArgs : {
          url : '../assets/image2.jpg'
          }
        }
      ] },
  ],
}).catch(console.error);

Here I share an url of image into my canvas.

Regards, Corentin.

mifi / editly

Custom parameters into canvas #235