0

I must make labels with JavaScript, it is simple. I must join a couple of generated images (QR code and product name), and others that never change (company logo).

I have no problem with static images that do not change because they are uploaded to the server.

I am using merge-images (link below) which only tolerates images hosted in the project directory.

https://www.npmjs.com/package/merge-images

How can I generate an image from a link within the project to pass it in the mergeImages src?

import logo from './logo-left.jpg';
import backg from './back.png'
const qrCode = "www.exampleImageLink.test/img"

 mergeImages([
            {src: backg },
            {src: logo, y: 50, x: 20},
            {src: qrCode, x: 600, y: 55},
            
            
        ]).then(b64 => setImg(b64));

logo and backg are inside my directory in the project, but qrCode changes because it is generated with another function that returns a link to the image of the qr code

Crimp
  • 389
  • 1
  • 22
Motias
  • 89
  • 9
  • What kind of error are you getting? – Juho Vepsäläinen Aug 16 '22 at 18:32
  • It's worth reading through the code at https://github.com/lukechilds/merge-images/blob/master/src/index.js . It's just pulling the images to `Image` objects that are then composited with a canvas. – Juho Vepsäläinen Aug 16 '22 at 18:34
  • i made : let imagentest = new Image() imagentest.src = 'https://media.gq.com.mx/photos/61f99491247e703ee62fca75/16:9/w_2560%2Cc_limit/halo.jpg'; mergeImages([ {src: imagentest }, {src:logo, y: 50, x: 20}, {src: detalle, y: 100, x: 200} , {src: codigo, x: 600, y: 55}, ]) and i get a: Uncaught (in promise) Error: Couldn't load image at img.onerror im seting the Image objet wrong ? – Motias Aug 16 '22 at 18:47
  • Looking at the code, it's enough if you pass a path to the image to it. There's no need to wrap it within an `Image` since it's doing that work for you. – Juho Vepsäläinen Aug 16 '22 at 18:54

0 Answers0