diff --git a/docs/SPEC.md b/docs/SPEC.md
index b7eb9b3..052de3a 100644
--- a/docs/SPEC.md
+++ b/docs/SPEC.md
@@ -140,9 +140,12 @@ kopierbar (grafisches Format, in Dokumente/Chats einfügbar):
- Das gerenderte Diagramm wird aus der Live-Geometrie in ein eigenständiges
SVG (nur Formen + Text, keine externen Ressourcen) nachgezeichnet und als
- **PNG** (`image/png`) in die Zwischenablage gelegt. Fällt der Bild-Clipboard
- aus (fehlende `ClipboardItem`-Unterstützung), wird der **SVG-Quelltext**
- kopiert (ebenfalls ein Grafikformat).
+ **PNG** in die Zwischenablage gelegt. Es werden zwei Flavors geschrieben:
+ `image/png` (das eigentliche Bild) und `text/html` mit eingebettetem PNG
+ (`
+
@@ -825,7 +825,7 @@ function diagramToSvg(){
const svg = `${parts.join('')} `;
return {svg, W, H};
}
-function svgToPngBlob(svg, W, H, scale){
+function svgToPng(svg, W, H, scale){
return new Promise(resolve => {
const img = new Image();
img.onload = () => {
@@ -834,20 +834,28 @@ function svgToPngBlob(svg, W, H, scale){
const ctx = c.getContext('2d');
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);
- c.toBlob(b => resolve(b), 'image/png');
+ c.toBlob(b => resolve({blob:b, dataUrl:c.toDataURL('image/png')}), 'image/png');
};
img.onerror = () => resolve(null);
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
});
}
+/* Kopiert das Diagramm als PNG-Bild. Zusätzlich wird eine text/html-Variante
+ mit eingebettetem PNG mitgegeben — Office-Programme wie LibreOffice Writer
+ bevorzugen den HTML-Flavor und betten das Bild dann korrekt ein. */
async function copyDiagramImage(){
const {svg, W, H} = diagramToSvg();
- const blob = await svgToPngBlob(svg, W, H, 2);
- if(blob && navigator.clipboard && window.ClipboardItem){
+ const png = await svgToPng(svg, W, H, 2);
+ if(png && png.blob && navigator.clipboard && window.ClipboardItem){
+ const html = new Blob(
+ [`