Question

我构建了一个画布元素，您可以在其中缩放和平移背景图像，然后单击可以在其上添加图标。它建立在面料js上。

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

我在下面列出了如何初始化我的画布的示例。

// 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

如果您只想生成图像而不是更改画布的缩放级别，可以将乘数参数传递给toDataUrl函数。

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

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

您甚至可以指定画布的一部分，您希望使用以下方法生成图像：

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

检查这里的详细信息，toDataUrl函数： http://fabricjs.com/docs/fabric.Canvas.html

如何在Javascript中将Zoomed和Panned Canvas保存到dataUrl

1 个答案: