CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvasfabricjs
user2823968
user2823968

Reputation: 49

How to save just the image of the canvas and not all canvas

I have a 800x600 for example and I use to add one image (200 x 200).

I apply several filters on my image and I would like to save it, but for the moment, I save the canvas 800x600 and I would like just save my picture after effects.

Is it possible?

Upvotes: 4

Views: 2555

Answers (3)

Tom
Tom

Reputation: 4652

From the latest version (download and compile it from GitHub), and this one is what you want:

canvas.toDataURL(left, top, width, height);

Check the question fabric.js - create Image object from ImageData object of canvas API for kangax’s comment only.

Upvotes: 4

Sanjay Nakate
Sanjay Nakate

Reputation: 2098

Try this

<button class="btn btn-success" id="rasterize">Convert Image To PNG</button>


//************************canvas to png image**********
    document.getElementById('rasterize').onclick = function() {
    if (!fabric.Canvas.supports('toDataURL')) {
      alert('This browser doesn\'t provide means to serialize canvas to an image');
    }
    else {

      window.open(canvas.toDataURL('png'));
      var gh=(canvas.toDataURL('png'));+
      alert(gh);
    }
    };
    //--------------end canvas to png image-----------------------

Upvotes: 0

markE
markE

Reputation: 105035

You can use FabricJS's canvas.toDataURL method which works much like html's canvas.toDataURL

var dataURL = myFabricCanvas.toDataURL();

If you wanted your user to save their canvas to their local disk, you could do this:

  • Create an image from the canvas.
  • Open that image in a new browser window
  • Have the user right-click and save-as the image

Here's code:

var win=window.open();
win.document.write("<img src='"+myFabricCanvas.toDataURL()+"'/>");

Note: if your image is hosted on a different domain than your .html, you will get a CORS security error and canvas.toDataURL will fail.

Upvotes: 3

Related Questions