Also verwende ich Highcharts.js, die SVG-Diagramme produziert. Ich konvertiere es in PNG und zeige es dann als ein img auf meiner Seite an. Aber aus irgendeinem Grund, wenn ich versuche, das neue Bild zu kopieren, ist die Paste leer.Wie kann ich Base64-Bilder kopieren/einfügen?
$("#export").click(function() {
var svg = $("#chart").find('svg')[0];
var svgSize = svg.getBoundingClientRect();
var svgData = new XMLSerializer().serializeToString(svg);
var img = document.createElement('img');
document.querySelector('#image').src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)))
});
Ich kann das Bild in einem neuen Tab öffnen, aber es gibt keine Option zum Kopieren mit der rechten Maustaste. Ich kann das Bild speichern. Aber aus irgendeinem Grund kann ich keine Kopie bekommen?
EDIT: Ich benutze nicht wirklich die Leinwand. Das war für etwas anderes. Ich habe mehr darüber geforscht und ich habe einen Stackoverflow von vor einigen Jahren darüber gesehen, wie die Binärdatenbilder/Base64-Bilder nicht kopiert werden können. Gibt es eine Lösung dafür?
Hier ist ein Beispiel JSFiddle. https://jsfiddle.net/lauralindy/8x9ob2v3/
Das liegt daran, dass Sie es auf die Leinwand rendern. Sobald es auf die Leinwand gezeichnet wird, wird es Teil der Leinwand, wenn es im unmittelbaren Modus gezeichnet wird. Dabei wird der Verweis auf das einmal gezeichnete Bild zurückgenommen. – Korgrue
Wäre es möglich, eine minimale jfiddle oder ähnliches zu erstellen? –
SVG ist und XML-basierte Bildformat, was bedeutet, dass es Code ist. Wenn Sie das SVG kopieren möchten, können Sie das Element überprüfen und das gesamte 'svg'-Tag kopieren. Andernfalls müssen Sie es in ein anderes Format wie (jpg, gif, png) konvertieren und dann kopieren. –