How to save only canvas image, not all canvases

Question

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

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

Is it possible?

Answer 1

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

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

fabric.js - Image ImageData canvas API kangaxs.

Answer 2

FabricJS canvas.toDataURL, , html canvas.toDataURL

var dataURL = myFabricCanvas.toDataURL();

, , :

• .
• -

:

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

. , .html, CORS, canvas.toDataURL .

Answer 3

<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-----------------------