javascript - 如何在 Javascript 中将缩放和平移的 Canvas 保存到 dataUrl

Question

我构建了一个 Canvas 元素，您可以在其中缩放和平移背景图像，然后通过单击可以在其上添加图标。它基于 fabric js 构建。

所以一旦我添加了图标并缩放和平移，我想将图像保存到 dataurl。如果我只使用 canvas.toDataURL，我只能看到当前显示的区域。有没有人有想法，如何保存背景图像的整个区域以及 Canvas 上的所有元素？因此，我需要一个函数来重置缩放和平移并将 Canvas 的大小调整为背景图像的大小。

我在下面提供了一个如何初始化我的 Canvas 的示例。

// New Fabric Canvas
 var canvas = new fabric.Canvas('c'); //render image to this canvas

window.addEventListener('resize', resizeCanvas, false);

  function resizeCanvas() {
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.renderAll();
  }

  // resize on init
  resizeCanvas();
        
// Load image
 var image = new Image();
    
    image.onload = function() {
     loadImage(image, canvas);
     canvas.height = image.height;
     canvas.width = image.width;
 }


 function loadImage(image, canv) {
     var img = new fabric.Image(image, {
         selectable: false,
         lockUniScaling: true,
         centeredScaling: true,
         alignX: "mid",
         alignY: "mid",
     });
     canv.add(img);
     canv.centerObject(img);
 }

 image.src = 'http://placehold.it/350x150';

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvasarea" style="background: #000;"> 
        <canvas id='c'  onclick="return false;"></canvas>
   </div>

Answer 1

如果你只是想生成一个图像而不改变 Canvas 的缩放级别，你可以将 multiplier 参数传递给 toDataUrl 函数。

var dataURL = canvas.toDataURL({
  format: 'png',
  multiplier: 2
});

这将在放大 200% 后生成图像。

你甚至可以指定 Canvas 的一部分，你想通过使用生成图像:

var dataURL = canvas.toDataURL({
  format: 'png',
  left: 100,
  top: 100,
  width: 200,
  height: 200
});

详情看这里，toDataUrl函数: http://fabricjs.com/docs/fabric.Canvas.html