We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Generate Merged Image From Multiple Images Using Generate Image Puzzles?

Home Forums Puzzles Generate Merged Image From Multiple Images Using Generate Image Puzzles?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #29031
    GlifTekGlifTek
    Licensee

    Hi,
    So say i have four 512 x 512 images, and want them combined into a long image 512 x 2048.

    Instead of using yet another library for just one thing, like merge-images.js, could this be done by somehow using the code behind the “texture from text” or “generate normal map” puzzles?

    The 512 x 512 images used would be already in the same directory, so no need to upload or retrieve from elsewhere, (ut that might come in handy at a later time perhaps.)

    Any info on this would be great.
    Thanks!

    #29611

    Hi,

    This can’t be done directly by using “texture from text” or “generate normal map” puzzles but the approach is similar (and also very close to what merge-images.js does).

    If you don’t want to have an additional dependency in your project you can just write a simple function specifically for your needs:

    It loads all the given images and after they are ready creates a canvas with dimensions 2048×512. Then it just draws all the images into the canvas with some offsets that you can specify in ctx.drawImage. The function returns a string in base64 format which looks like data:image/jpeg;base64,/9j/4AAQSkZJRgABA....

    You can use it to create and add a new image onto the page:

    Btw, if you use this canvas approach there’s a limit for the maximum width and height for the combined image: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#Maximum_canvas_size

    Co-founder and lead developer at Soft8Soft.

    #29645
    GlifTekGlifTek
    Licensee

    Hi,
    Thanks Ivan!
    I’ll try it out!
    :good:

    is (ImgSources) an array?

    • This reply was modified 1 month, 1 week ago by GlifTekGlifTek.
    #29869

    is (ImgSources) an array?

    Yes, it’s supposed to be an array if image URLs.

    Co-founder and lead developer at Soft8Soft.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.