Question

我有一个Fabric.js 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

＆＃13;

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;
}

＆＃13;

canvas {
    border: 2px solid #999;
}

＆＃13;

<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="">

＆＃13;

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

为什么toDataUrl（）乘法器不适用于Fabric.js？

1 个答案: