javascript - Canvas 乘数未按预期工作

Question

当我用它保存 Canvas 的两面时，我尝试向以下代码添加一个乘数以生成更高质量的图像，但没有任何运气(我使用的是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");
  }

它适用于类似的代码，但我遗漏了一些东西。我做错了什么？

// 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');
}

我还尝试将乘数添加到 var dataURL = c.toDataURL 变量中，但没有运气。

<小时/>

这是我的初始化示例:

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);
});

Answer 1

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");
}

您需要将 multiplier 属性传递给 toDataURL()。