代码之家 › 专栏 › 技术社区 › anonymoose

画布乘数未按预期工作

fabricjs javascript

anonymoose · 技术社区 · 6 年前

我试图在以下代码中添加一个乘数,以便在用它保存画布两侧时生成更高质量的图像,但没有任何运气(我使用的是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);
});

1 回复 | 直到 6 年前

Durga 6 年前

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() .