Custom parameters into canvas
cDelage opened this issue · 1 comments
Hello everyone,
Is it possible to pass custom parameters in the Canvas function?
For example, I want to create a canvas animation with various images or texts, but I need to share this image from parameters and I can't.
Regards,
Corentin.
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.