How to open a new page with data url image?

Question

I'm working with literallyCanvas which is the export button will open a new page with data url of the image edited. But I need to change the way it open a new page from an image to a page with var.

This is the original code from source which is open a new page with image:

    $("#open-image").click(function() {
      window.open(lc.getImage({
         rect: {x: 0, y: 0, width: 1200, height: 800},
        scale: 1
      }).toDataURL());
    });

So, I tried to change the structure with page name in it, and I've got:

     $("#open-image").click(function() {
      window.open('preview.php?img='+lc.getImage({rect: {x: 0, y: 0, width: 1200, height: 800},scale: 1})).toDataURL();
    });

But it makes my browser frozen. I can't do anything but force it to close and open it again. I really want this button #open-image to open a new page like preview.php?img=apaosidfjskf(123asdfpoa$sldkjfwepfaoASfweas . But it gives me this instead preview.php?img=[object HTMLCanvasElement]

Please suggest me if there's anything I'm done wrong or enlighten me to the solution.

Answer 1

Looks like you have a typo

Code With Typo Corrected

$("#open-image").click(function() {
  window.open('preview.php?img=' + lc.getImage({
    rect: { x: 0, y: 0, width: 1200, height: 800 },
    scale: 1
  }).toDataURL()); // This line has been corrected
});

That should fix the preview.php?img=[object HTMLCanvasElement] problem