0

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

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

1 回答 1

4

实现此目的的最佳方法是在导出之前调整阶段大小，然后将其调整回来：

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

于 2016-09-23T15:24:41.037 回答