0

プロジェクトでKonvaJSを使用しています。を画像として保存する必要がありstage/canvasます（エクスポートされた画像が高解像度の画像である場合は素晴らしいでしょう）。キャンバス コンテンツを Base64 文字列として返すstage.toDataURL()KonvaJSという関数があります。この関数の課題は、キャンバスの可視領域のみを返すことです。表示領域だけでなく、キャンバス全体を画像としてエクスポートする必要があります。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 に答える