CODEWITHSUNDEEP
javascriptcanvashtml5-canvasfabricjs
Mark Chidlow
Mark Chidlow

Reputation: 1472

Why is toDataUrl() multiplier not working for me with Fabric.js?

I have a Fabric.js Canvas with image that can be zoomed and I wish to save the full size image without having to resize the canvas.

So I am using the multiplier parameter in the toDataURL method.

When I set the multiplier value to 1 it works as expected, however any other value returns an image of the correct size but is blank.

My code is this:

fabric.Image.fromURL('drawing.png', function (img) {

    canvas.add(img);

    // LOGS CORRECT IMAGE
    console.log(canvas.toDataURL({ format: 'png', multiplier: 1 }));

    // LOGS A BLANK IMAGE
    console.log(canvas.toDataURL({ format: 'png', multiplier: 2 }));

}, { crossOrigin: 'anonymous' });

Can anyone point me in the right direction please?

Upvotes: 0

Views: 1177

Answers (1)

Durga
Durga

Reputation: 15604

var canvas = window._canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(oImg) {
  canvas.add(oImg);
  oImg.set({
   scaleX:2,
   scaleY:2
  });
  oImg.setCoords();
  setImage(oImg.toDataURL());
  canvas.renderAll();
}, { crossOrigin: 'anonymous' });

function setImage(val){
  var el = document.getElementById('result');
  el.src = val;
}
canvas {
    border: 2px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<br>  
<img id='result' alt="">

If you want only that image , you can use object.toDataURL();

Upvotes: 1

Related Questions