Question

我在我的项目中使用KonvaJS。我需要将stage/canvas保存为图像（如果导出的图像是高分辨率图像则会很好）。 KonvaJS有一个名为stage.toDataURL()的函数，它将画布内容作为Base64字符串返回。这个功能的挑战是它只返回画布的可见区域。 我需要将整个画布导出为图像，而不仅仅是它的可见区域。我尝试使用Canvas2Image，但它也只保存可见区域而不是完整画布。有什么办法可以实现吗？这里有一个plunkr来玩一些poc（概念验证）代码。

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();

var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;

(function() {
  for (var i = 0; i < 50; i++) {
    layer.add(new Konva.Rect({
      x: i * 50,
      y: 0,
      width: 50,
      height: 10000,
      fill: Konva.Util.getRandomColor()
    }));
  }
})();

var box = new Konva.Rect({
  x: rectX,
  y: rectY,
  width: 100,
  height: 50,
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

box.on('mouseover', function() {
  document.body.style.cursor = 'pointer';
});

box.on('mouseout', function() {
  document.body.style.cursor = 'default';
});

layer.add(box);
layer.draw();
stage.add(layer);

function exportCanvas() {
  var dataURL = stage.toDataURL();
  window.open(dataURL);
}

document.getElementById('save').addEventListener('click', exportCanvas, false);

Answer 1

实现此目的的最佳方法是在导出前调整舞台大小，然后重新调整大小：

var oldSize = stage.size();

var exportSize = {
    width: 3000,
    height: 3000
};
stage.size(exportSize);
stage.draw();
var dataURL = stage.toDataURL(exportSize);
stage.size(oldSize);
stage.draw();

演示：http://plnkr.co/edit/DiqsE7rZdDx3JIAyJZQK?p=preview

画布内容为高分辨率图像。

1 个答案: