fabric.js - toDataURL zeigt leere Seite, wenn es ein Bild ist auf Leinwand

Ich bin mit fabric.js für meine Leinwand-Anwendung, toDataURL Methode funktioniert einwandfrei, außer, wenn es ein Bild auf Leinwand. Wenn ich ein Bild auf eine Leinwand und nennen toDataURL es zeigt mir eine leere Seite.

//When i call it from chrome console
canvas.toDataURL();
//It returns a working data url with no problem.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYCSmDflKuOyk8Q+H+CKCqUW0spTgAAAABJRU5ErkJggg=="

//When i execute same code in a .js file it returns a data url which shows a blank image.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAKC0lEQ…sBAmEBAw6XJzoBA/YDBMICBhwuT3QCBuwHCIQFDDhcnugEHt/IAaW9dzALAAAAAElFTkSuQmCC"

Es ist interessant, dass es funktioniert auf chrome dev-Konsole aber nicht funktioniert .js-Datei, selbst wenn es der gleiche code. Ich bemerkte, dass die Arbeit data-url endet mit "= = " aber die anderen nicht. Allerdings weiß ich nicht, was das bedeutet.

InformationsquelleAutor Yusuf Can Gürkan | 2013-10-13
  1. 5

    Sie gab nicht viel zu analysieren, aber ich gehe von dort aus auf mein Bauchgefühl.

    Dem Bild, das Sie verwenden, ist wahrscheinlich die Verletzung Cross-Origin Resource Sharing (CORS) zu erfüllen. Wenn dies geschieht, die Leinwand zurückkehren wird, ein leeres Bild, wenn Sie versuchen, um die pixel-Daten entweder mit canvas.toDataURL() oder context.getImageData().

    Es ist im Grunde passiert, wenn das Bild befindet sich nicht auf der gleichen Domäne wie die Seite oder laden Sie aus der Datei://- Protokoll.

    Können Sie versuchen, fügen Sie den folgenden, um das image-Objekt, bevor Sie die Quelle:

    image.crossOrigin = 'anonymous';
image.src = '...';

    Vom tag:

    <img crossOrigin='anonymous' src='...' alt='' />

    Dadurch wird die Erlaubnis vom server, um die Bild-cross-origin. Wenn der server erlaubt, Sie sollten in Ordnung sein.

    Wenn nicht müssen Sie entweder kopieren Sie das Bild auf Ihrem eigenen server, so lädt er aus der gleichen Domäne wie Ihre Seite, oder erstellen Sie eine proxy-Seite, die lädt das Bild nach außen und dient zu Ihrer Seite aus dem proxy-Seite (es klingt kompliziert, ist aber wirklich nicht).

    Wenn das Bild nicht zeigen, bis auf der Leinwand sind Sie wahrscheinlich nicht mit load-callback, die Sie benötigen, da das laden der Bilder erfolgt asynchron. Wenn also nur hinzufügen:

    image.onload = function() {
    ///now you can draw the image to canvas
}
image.crossOrigin = 'anonymous';
image.src = '...';
    InformationsquelleAutor
  2. 5

    Das problem ist gelöst. Der Punkt, den ich übersehen habe, war ich aufrufende Funktion toDataURL vor der Leinwand geladen wird, das ist, warum es zeigt mir eine leere Seite.

    canvas.loadFromJSON(json,function(){
          var dataURL = canvas.toDataURL();
          });

    Dies ist mein problem gelöst wenn ich gab toDataURL () - Funktion als callback zu loadFromJSON Funktion.

    Aber nach einer Weile hatte ich ein anderes Problem, über CORS, als ich versuchte zum hochladen meiner Bilder aus dem s3-bucket und ich löste dieses problem, wie oben Lösung.

    • Macht Sinn, das löste mein problem auch. Froh sah ich Ihre Antwort, bevor du mehr von mir die Haare über die CORS Zeug mit S3!
    InformationsquelleAutor Yusuf Can Gürkan
Schreibe einen Kommentar