Question

我要在下面的代码中添加一个乘数，以便在保存画布的两面但没有运气的情况下生成更高质量的图像（我正在使用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中，但是没有运气。

这是我的初始化示例：

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

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

画布乘法器无法按预期工作

1 个答案: