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

【问题标题】：Canvas Content as High Resolution Image.画布内容作为高分辨率图像。
【发布时间】：2016-09-23 12:46:58
【问题描述】：

我在我的项目中使用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);

【问题讨论】：

你用什么来定义“全画布”？如果您的意思是 window.innerWidth 和 window.innerHeight，那么它已经按原样工作了。如果您创建的 Rect 超出了这些边界（例如声明中的 height:10000），它将被裁剪为画布的大小（在本例中为 window.innerHeight）。据我所知，plunkr 已经按预期工作了。
同上@binarymax 所说的：任何溢出可见画布的绘图实际上都不会被渲染。所以 toDataURL 会获取整个可见的画布——但不会获取未绘制的溢出。 ;-) 如果您想要一个 50x10000 的画布，您可以创建一个，然后 toDataURL 将生成您的“完整”绘图
@binarymax & markE 是的，就我而言，它超出了界限。我也想得到那些溢出可见区域的图纸。
@HiteshKumar 在这种情况下，您应该设置 stage.height 和 stage.width 以满足您需要的完整尺寸要求。例如，在第 7 行，设置 {height:10000} 以便能够创建一个高度为 10000 的 Rect 并将其保留。再次值得注意的是，您所描述的“可见区域”实际上是“整个区域”。就像建筑物有墙壁一样，画布也有固定的宽度和高度，绘制时不能超过。
明白了，谢谢 :)

标签： javascript html canvas konvajs

【解决方案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

【讨论】：

其实还是调用draw比较好。
知道了。非常感谢你。现在我需要弄清楚的是将画布导出为高分辨率图像。在 POC 代码中，我完成了简单的绘图，但在我的实际项目中，我在画布上有一个背景图像和一些绘图。所以当我导出它时，要求它应该是高分辨率图像（与背景图像相同）。我打算用图像大小调整舞台大小，然后将其导出。如果您对此有更好的方法，请告诉我。
toDataURL({pixelRatio: 2})