How can I merge two images with velo?

Ask the community
,
1

Hi Velo team,
I would like to combine two images and download the processed image, I was doing this with canvas but I don’t know how to finish this with velo, is this possible? Thanks.
Here is the code I was using,
///////////
compositeImg = () => {
const canvas = document . createElement ( ‘canvas’ )
const ctx = canvas . getContext ( ‘2d’ )
canvas . width = 800
canvas . height = 600
const url = this . changeCanvasToPic ()
const img1 = new Image ()
const img2 = new Image ()
img1 . src = url
img2 . src = ‘images/bg/’ + this . state . codeDate + ‘.jpg’

console . log ( 'img1' ,  img1 . complete ) 
console . log ( 'img2' ,  img2 . complete ) 

setTimeout (()  =>  { 
  if  ( img1 . complete  &&  img2 . complete ) { 
    ctx . drawImage ( img2 ,  0 ,  0 ,  800 ,  600 ) 
    ctx . drawImage ( img1 ,  650 ,  450 ,  99 ,  99 ) 
  }  else  { 
    console . log ( 'load failed, retry' ) 
    return 
  } 

  ctx . stroke () 
  const  urls  =  canvas . toDataURL ( 'image/jpg' ) 
  console . log ( 'ctx' ,  urls ) 
  this . pictruedowns ( urls ) 
},  1000 )

};

2

Image editing can be a complex sport. Generally, you have two methods, either using the browser canvas, like in your example above, or using WebGL. Canvas is part of the HTML5 standard so it works in browsers with regular JS & HTML, but direct access to DOM elements isn’t available out of the box in Velo - e.g.

const canvas = document.createElement('canvas');

won’t work in your page code.

You can approach it a few ways, but any method for image editing will require research.

  1. Use Custom Elements to create a component with DOM access, which will get your code working with some modification

  2. Use an npm library like node-canvas to simulate access to the canvas in your Wix backend code

  3. Look for another editing library that makes use of buffers to do image editing, which is just the raw image data.

Not leaving you high and dry, here are some resources to get started.

Common Image Manipulation Libraries (you’ll have to make sure the are available in Velo, or request them) - NodeJS Image Manipulation Libraries | by Brandon Russell | On Discord | Medium
Node Canvas - canvas - npm

3

Hi Chirs,
Thank you for the reply, can you give me an example about how to use canvas in custom element? Thanks.

4

Were you able to get this to work? I am able to use jimp for the same thing but could never get the jimp npm package to install in velo after I got it installed in the npm packages section.