Wie zu verwenden Fabric.js so speichern Sie ein Bild als ein Bild

Habe ich eine Fabric.js Prototyp, wo die Leute laden können Fotos, text und Karten in den canvas-Bereich. Wenn Sie fertig sind, möchte ich Ihnen speichern zu können, die Leinwand wie ein Bild. Ich habe versucht, mit dem standard:

canvasURL = canvas.toDataURL();
var image = new Image();
image.src = canvas.toDataURL("image/png");
$('#canvasContainer').replaceWith(image);

aber es sagt, dass die Leinwand ist tainted - denke ich da an die Bilder (die obige Methode funktioniert, wenn es nur text). Der Fehler ist: 

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Kann ich nutzen Gewebe eingebaute Methode zum speichern als SVG:

var canvasSVG = canvas.toSVG();
$('#canvasContainer').replaceWith(canvasSVG);

Aber ich hätte lieber ein PNG/JPG. Irgendwelche Ideen?

Hier ist die Fabric.js Dokumentation zur Serialisierung der Leinwand.

http://fabricjs.com/fabric-intro-part-3/#serialization

InformationsquelleAutor mheavers | 2014-04-15
  1. 4

    Müssen folgende Bedingungen erfüllt sein:

    1. Ihre cross-domain - <img> Elemente enthalten muss, eine crossorigin Attribut.
    2. Der server-hosting der Bilder muss wieder ein " Access-Control-Allow-Origin-header in der Antwort entweder ein Platzhalter oder zu Ihrer speziellen Domäne als Wert.
    3. Muss der browser die Unterstützung CORS auf HTMLMediaElements, speziell HTMLImageElements. Dies ist derzeit nur möglich, in Chrome, Firefox und Opera 15+
    • Hinweis: Diese könnte möglich sein, als auch in Safari 7 als gut.
    InformationsquelleAutor Ray Nicholus
  2. 4

    Dies funktioniert gut für mich

    function convertToImagen() {
  canvas.deactivateAll().renderAll();  
  window.open(canvas.toDataURL('png')); 
}
    InformationsquelleAutor Nick11
  3. 2

    Als kleiner Hinweis, denken Sie daran, dass, wenn Sie die Entwicklung auf dem lokalen Rechner sondern auf einem server, werden Sie wahrscheinlich sehen, diese Sicherheits-Fehlermeldung.

    • Ich konnte nicht kommentieren, weil mein Ruf.
    InformationsquelleAutor JDrake
  4. -2

    Ich Stand vor dem gleichen Problem, löste es, indem zuerst die übergabe der Bild-url in ein ajax-call auf eine php-Datei, konvertieren Sie das Bild und bringen Sie eine data-url

    <?php
$content=file_get_contents($_POST['imageurl']);
echo "data:image/png;base64,". base64_encode($content);
?>

    stellen Sie sicher, dass die async:false für den ajax-call

    können Sie die zurückgegebenen Daten zu erstellen Sie Ihre Bild-Objekt und laden Sie es auf die Leinwand.

    • Dies ist potenziell gefährlich Beratung. Es gibt keinen Grund, um dies einem synchronen Aufruf. Dabei eröffnet das die Möglichkeit, das sperren des gesamten browser, wenn dieser Antrag nimmt eine erhebliche Menge an Zeit. Bitte überlegen Sie Ihre Antwort.
    • ich habe eine Anwendung, wo Sie in Bilder können per Drag & Drop von Ordnern,Browsern oder gesucht werden kann von dropbox-Konten oder gdrives ich Erstens identifizieren Sie die samedomain flag und übergeben Sie die Bilder für die Umwandlung, wenn aus einer anderen Domäne, ja, es ist eine Durchschnittliche Verzögerung von 3,5 Sekunden, je nach Bildgröße unter Berücksichtigung durchschnittlich 2mb mit einer download-Geschwindigkeit von 512 kbit / s, aber ich habe auch proportional skalieren eigenen Bild auf eine vernünftige Größe.Das hat gut funktioniert für mich bisher.bitte lassen Sie mich wissen, Ihre Ansichten
    • Die Quintessenz ist, verwenden Sie niemals synchrone Ajax-requests im browser außerhalb von web-worker. Nichts, was Sie tun, erfordert einen synchronen Aufruf.
    InformationsquelleAutor melwyn pawar
Schreibe einen Kommentar