javascript - 为什么 toDataUrl() 乘法器对 Fabric.js 不起作用？

Question

我有一个 Fabric.js Canvas，其图像可以缩放，我希望保存全尺寸图像，而无需调整 Canvas 大小。

所以我在 toDataURL 方法中使用 multiplier 参数。

当我将乘数值设置为 1 时，它会按预期工作，但是任何其他值都会返回正确大小的图像，但为空白。

我的代码是这样的:

fabric.Image.fromURL('drawing.png', function (img) {

    canvas.add(img);

    // LOGS CORRECT IMAGE
    console.log(canvas.toDataURL({ format: 'png', multiplier: 1 }));

    // LOGS A BLANK IMAGE
    console.log(canvas.toDataURL({ format: 'png', multiplier: 2 }));

}, { crossOrigin: 'anonymous' });

有人能给我指出正确的方向吗？

Answer 1

var canvas = window._canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(oImg) {
  canvas.add(oImg);
  oImg.set({
   scaleX:2,
   scaleY:2
  });
  oImg.setCoords();
  setImage(oImg.toDataURL());
  canvas.renderAll();
}, { crossOrigin: 'anonymous' });

function setImage(val){
  var el = document.getElementById('result');
  el.src = val;
}

canvas {
    border: 2px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<br>  
<img id='result' alt="">

如果您只想要该图像，可以使用object.toDataURL();