Wie Leinwand in SVG mit eingebettetem Bild base64 in fabricjs

konvertieren Ich habe fabricjs Leinwand mit Bild, die ich geladen von fabric.Image.fromURL() Methode.Wie Leinwand in SVG mit eingebettetem Bild base64 in fabricjs

Ich muss es in SVG exportieren, aber ich möchte Bild als eingebettete Quelle in Base64, nicht als Link exportieren.

Wie kann ich es tun? Ist es eine Möglichkeit, das Bild als Quelle und nicht als Link zu laden?

Beispielcode:

Lade Bild:

fabric.Image.fromURL('./assets/people.jpg', function (image) { 
    image.set({ 
     left: 10, 
     top: 30 
    }); 
    canvas.add(image); 
};

nach SVG exportieren:

canvas.toSVG();

In exportierte SVG Ich habe:

<image xlink:href="http://localhost:8383/app/assets/people.png" />

Aber ich will es in base64 wie:

<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAe8AAAKuCAYAAACIZZSZAAAAAXNSR0IArs4c6QAAAARnQU1BAACx(...)" />

Quelle

2016-05-09 Jacek Gzel

Ich weiß nicht, ob es eine direkte Option in Fabricjs gibt, aber es wäre nicht schwer, es selbst zu schreiben: URL analysieren, das Bild laden, auf eine neue Leinwand mit der Größe des Bildes zeichnen, ersetzen die URL mit diesem Canvas 'toDataURL-Ergebnis. – Kaiido

Ich suchte nach einer direkten Option in Fabricjs, aber wenn es nicht existiert, muss ich es selbst schreiben. Danke Kaiido für deinen Rat, ich werde deinen Ansatz umsetzen. –

Nach einer kurzen Suche in den Dokumenten von fabricjs konnte ich keine Optionen finden. Aber etwas, was mir später in den Sinn kam, ist, dass du dein Bild tatsächlich direkt in ein dataURI konvertieren und dieses dataURI an fabricjs übergeben kannst, ich denke, es würde funktionieren und das Parsing-Ding vermeiden. Auch einige SO-Benutzer nehmen an der Entwicklung von Fabricjs teil, also hoffen wir, dass sie Ihren Beitrag sehen und diese Option in eine zukünftige Version aufnehmen. (Auch wenn ich die Grenzen der Ursprungsherkunft in einer solchen Bibliothek als "no-go" sehen kann) – Kaiido

Es gibt keine Option, aber man kann es so leicht erreichen: Bild hat eine Methode, die ‚getSvgSrc‘ genannt wird;

Überschreibung es wie folgt aus:

fabric.Image.prototype.getSvgSrc = function() { 
    return this.toDataURLforSVG(); 
}; 

fabric.Image.prototype.toDataURLforSVG = function(options) { 
    var el = fabric.util.createCanvasElement(); 
    el.width = this._element.naturalWidth; 
    el.height = this._element.naturalHeight; 
    el.getContext("2d").drawImage(this._element, 0, 0); 
    var data = el.toDataURL(options); 
    return data; 
};

Auf diese Weise sollten Sie in der Lage sein, ein integriertes Bild für das svg zu erhalten.

Quelle

2016-05-11 20:13:16 AndreaBogazzi

Wie Leinwand in SVG mit eingebettetem Bild base64 in fabricjs

Antwort

Verwandte Themen