Pourquoi le multiplicateur toDataUrl() ne fonctionne pas pour moi avec Fabric.js?

Question

J'ai une toile Fabric.js avec une image qui peut être agrandie et je souhaite enregistrer l'image en taille réelle sans avoir à redimensionner la toile. Donc, j'utilise le multiplicateur dans la méthode toDataURL.

Lorsque je règle la valeur du multiplicateur sur 1, cela fonctionne comme prévu, mais toute autre valeur renvoie une image de la bonne taille mais est vide.

Mon code est le suivant:

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

Quelqu'un peut-il me diriger dans la bonne direction s'il vous plaît?

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

Si vous ne souhaitez que cette image, vous pouvez utiliser object.toDataURL();