CODEWITHSUNDEEP
javascriptfabricjs
anonymoose
anonymoose

Reputation: 1243

Canvas Multipliers Not Working as Expected

I am trying to add a multiplier to the following code to produce a higher quality image when I save both sides of my canvas with this but am not having any luck (I am using fabricjs 1.7.22):

 // Save Canvases as Images
  $("#save").click(save);

  function download(url, name) {
    $("<a>")
      .attr({
        href: url,
        download: name
      })[0]
      .click();
  }

  function save() {
    mainCanvas.deactivateAll().renderAll();
    var c = document.getElementById('canvas1');
    var dataURL = c.toDataURL();
    var name = 'back';
    download(dataURL({
      multiplier: 2
    }), name + ".png");
    var c = document.getElementById('canvas2');
    var dataURL = c.toDataURL();
    var name = 'front';
    download(dataURL({
      multiplier: 2
    }), name + ".png");
  }

It works with this similar code, but I'm missing something. What am I doing wrong?

// Save
function download(url, name) {
  // make the link. set the href and download. emulate dom click
  $('<a>').attr({
    href: url,
    download: name
  })[0].click();
}

function downloadFabric(canvas, name) {
  //  convert the canvas to a data url and download it.
  download(activeCanvas.toDataURL({
    multiplier: 2
  }), name + '.png');
}

I also tried adding the multiplier to var dataURL = c.toDataURL vars without luck.

Here is an example of my initialization: 

var mainCanvas, canvas1, canvas2, view = false;

$(function () {
  $viewText = document.querySelector("#viewText");
  canvas1 = new fabric.Canvas('canvas1', {
    preserveObjectStacking: true,
    lockUniScaling: true,
    centeredScaling: true
  });
  canvas2 = new fabric.Canvas('canvas2', {
    preserveObjectStacking: true,
    lockUniScaling: true,
    centeredScaling: true
  });
  canvas1.setHeight(412);
  canvas1.setWidth(637);
  canvas2.setHeight(412);
  canvas2.setWidth(637);
  changeView(1);

  // Center Line
  var line = new fabric.Line([canvas1.width / 2, 0, canvas1.width / 2, canvas1.height], {
    strokeWidth: 0.1,
    stroke: 'black',
    selectable: false,
  });
  canvas1.add(line);
  canvas2.add(line);
});

Upvotes: 0

Views: 411

Answers (1)

Durga
Durga

Reputation: 15614

function save() {
  mainCanvas.deactivateAll().renderAll();
  //canvas1 fabric canvas insance
  var dataURL = canvas1.toDataURL({
    multiplier: 2
  });
  var name = 'back';
  download(dataURL, name + ".png");
  //canvas2 fabric canvas insance
  var dataURL = canvas2.toDataURL({
    multiplier: 2
  });
  var name = 'front';
  download(dataURL, name + ".png");
}

You need to pass multiplier property to toDataURL().

Upvotes: 1

Related Questions