I have a code which it seems the same as your example page

const mergeImages = require('merge-images');
const Canvas = require('canvas');

const sendMerged = function(email) {
    mergeImages(['../public/logo.png', '../public/710fb.png'], {
      Canvas: Canvas
    })
    .then //....

But I get the error

TypeError: options.Canvas is not a constructor
    at /Users/xxx/GIT/projects/abc/node_modules/merge-images/dist/index.umd.js:25:32

If I console log Canvas I have the following

{ Canvas: { [Function: Canvas] _registerFont: [Function: _registerFont] },
  Context2d: [Function: CanvasRenderingContext2D],
  CanvasRenderingContext2D: [Function: CanvasRenderingContext2D],
  CanvasGradient: [Function: CanvasGradient],
  CanvasPattern: [Function: CanvasPattern],
  Image: { [Function: Image] MODE_IMAGE: 1, MODE_MIME: 2 },
  ImageData: [Function: ImageData],
  //...
}

So I tried to change the code above to

//...
const Canvas = require('canvas').Canvas; //This is against the canvas documentation example
//...

After this change it seems to be fine with the constructor but it fails the line after with

TypeError: Image is not a constructor
    at /Users/xxx/GIT/projects/abc/node_modules/merge-images/dist/index.umd.js:39:13

I wonder if it's a bug with the new version of a dependency (I noticed you don't pin them). Do your test run a new npm install? is this functionality tested? Thanks a lot

Great script! I have images that are generated from SVG, not external URLs - so I have img elements I'd like to use with this - I tried converting your script to one that could use existing elements, without much luck. Do you have any tips?

thanks again! Stacey

Version 0.56.0 of rollup was just published.

The version 0.56.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of rollup.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Your Greenkeeper bot :palm_tree:

Please give an option to set crossOrigin attribute for the source images.

This is solve the problem while converting canvas to b64 "Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

This branch introduces a crossOrigin option that is undefined by default, but can be set to Anonymous in order to allow cross-origin images to be loaded from servers that support CORS.

I used the method described at https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image as inspiration for this change.

Fixes #54 Fixes #80

I am trying to merge two images from my firebase storage. I allowed cors on my bucket, but when trying to merge it I get: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I'm not sure if I understand correctly, but shouldn't images from my firebase storage bucket be from the same domain? Not sure why I get this error

I updated all the dependencies. Got all the tests to pass. Included the image resizing PR as I like it.

I know there are better ways to rewrite this with the new libs, but I just wanted a working version.

Version 0.54.1 of rollup was just published.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot :palm_tree:

Hi Luke, thanks for a great lib! This is more a question than an issue so feel free to close it right away: I was wondering if this would allow me to combine two data URI into 1?

The use case being a drawing / animation application where I need to combine each animation frame's different layers into one frame.

/Nicolas

Getting "ReferenceError: window is not defined" when using with nodejs. Below given is my approach.

var mergeImages = require("merge-images");

mergeImages([
 { src: image1.buffer },
 { src: image2.buffer }
]).then(b64 => {
 console.log(b64);
});

I have created the node app and here is my API

app.get('/',function(req,res){ mergeImages(['./public/images/T_4.gif','./public/images/e2.jpg'], { Canvas: Canvas }) .then((b64) => { console.log("hi")}); })

1. After running the App , the function mergeImages is called and invoking indexjs in the back ground , but i am getting window is undefined in indexjs i.e var canvas = options.Canvas ? new options.Canvas() : window.document.createElement('canvas');

2.So i removed that line and set var canvas = options.Canvas now i am getting error at var ctx = canvas[0].getContext('2d'); i.e getContext function is undefined.

Is this an issue with nodejs or this module is used only for client side scripting ? Please help me to fix the issue.

Thanks

This PR is to bring typescript support to the library.

But, still there are some areas to be improved.

1. First issue is with using HTMLImageElement & CanvasRenderingContext2D. These are browser globals. So, it gives an error when running AVA tests. Also, this might give errors in Node Js apps. Can someone please, suggest a method to overcome this.

2. Also, in index.ts line 67, I have added validation in order to avoid npm build fail due to type mismatch. This error comes because the type of Image (in canvas) does not compatible with the type CanvasImageSource of drawImage method.

I am not very good in JS. So, if someone helps me, I can work on this further to finalize this PR and add TS support to this library.

Hello guys, I am currently working on a project where I need to merge 2 images that are stored in the firebase storage. I can fetch the images but when I try to merge them I get the following error:

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at http://localhost:3000/static/js/bundle.js:64075:21

            { src: firebaseImage.src }, 
            { src: firebaseSignature.src, x: xPosition, y: yPosition }
        ]).then(b64 => {
            document.getElementById('generated').src = b64;
        });

I am using React in the front end and Firebase as my backend. here the code for fetching the Image:

        getDownloadURL(ref(storage, url)).then((url) => {
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.onload = (event) => {
                const blob = xhr.response;
            };
            xhr.open('GET', url);
            xhr.send();
            // Or inserted into an <img> element
            const img = document.getElementById(id);
            setImage(img)
            img.setAttribute('src', url);
        }).catch((error) => { // Handle any errors
        });
    }

And the output of my Image variable: <img id="preview" width="300" height="400" src="<Imagesrc>"> The src is correct I just didn't want to use the real src

Thank you for your help

I am considering the limitations of canvas and how they apply to merge-images. Does any workaround exist in order to merge two very long images, in cases where the result would exceed the maximum length of a canvas (typically 32,767 pixels)?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size

I wanted to test merging images inside the browser with this code:

index.html

<h1>Testing MergeImages</h1>
<script src="https://unpkg.com/merge-images"></script>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    console.log("Dom + mergeImages loaded ✅");
    console.log(mergeImages);

    const images = [
      "https://firebasestorage.googleapis.com/v0/b/homeboard-5d28b.appspot.com/o/smiles.wtf.testing%2F0_bg.png?alt=media&token=53eb4b7e-73b7-419b-83c0-32b4d6810e46",
      "https://firebasestorage.googleapis.com/v0/b/homeboard-5d28b.appspot.com/o/smiles.wtf.testing%2F1_body.png?alt=media&token=7c9e7214-fa87-40d5-a4ad-686a66ee3511",
      "https://firebasestorage.googleapis.com/v0/b/homeboard-5d28b.appspot.com/o/smiles.wtf.testing%2F2_face.png?alt=media&token=8c728305-664b-4435-8b41-1c7b01530265",
    ];

    mergeImages(images).then(b64 => console.log(b64));
  })
</script>

But I get this error:

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

My environment:

• BRAVE Browser Version 1.22.71 Chromium: 89.0.4389.114 (Offizieller Build) (64-Bit)
• Ubuntu 20.04.2 LTS

Did I use the repo wrong or is this a bug? Thanks for any help! :)

As the title suggests, I would like to animate or create an animated canvas and merge all together into an output gif file.

Like i have multiple layers of pngs, that i would like to animate the position of each image, make them fall from top to an specific Y position (dynamic) after some delay so they look like a stacking animation.

Any idea on how to achieve this?

Please merge both wallets and deposit fund to slice wallet

SbJsmsH2DF5cQsTNrfWHyVvKQrJ7NqRrXc

Merge wallet with slice wallet

SbJsmsH2DF5cQsTNrfWHyVvKQrJ7NqRrXc

Provide full access to both slice wallets to make transfer to clients bank account as soon as possible