Bilder einfügen in Content Editable Div in Chrome und Edge

[Elma]

Hi.

Wenn man ein Content Editable Div hat, kann man im Internet Explorer und im Firefox ganz einfach ein Bild aus der Zwischenablage einfügen.
Zum Beispiel einen Screenshot erstellen und mit strg-v einfügen.
Der kann dann auch einfach per js weiterverarbeitet werden.

Leider funktioniert es unter google Chrome und unter Microsoft Edge nicht.
Unter Chrome muss man das Paste Event abfangen, Clipboard Data auslesen, mit getfilecontents arbeiten und es dann manuell über DOM Manipulation hinzufügen.

Gibt es eine einfache, browserübergreifende Möglichkeit, das Einfügen von Bildern in ein Content Editable Div zu ermöglichen?

Danke

- - - Aktualisiert - - -

Hier mal mein Code, um auch unter Chrome und Edge ein Pasten von Images in ein Content Editable Div zu ermöglichen:

document.addEventListener('paste', function(e)
{
	var items;
	var img;
	var blob;
	var inputdiv=document.getElementById('input');
 	var contents;
 	var reader;

	if (typeof (e.clipboardData.items!="undefined")) {
	items=e.clipboardData.items; 

    	if(items[0].type.indexOf("image") === 0)
    	{
    	    blob = items[0].getAsFile();
    	};
    	

	if(blob) {
		reader = new FileReader();
    		reader.onload = function(event)
    		{
    			contents=event.target.result;
    			img= new Image();
				img.src=contents;
        		document.getElementById('input').appendChild(img);

      		};
    		reader.readAsDataURL(blob);
		};
	};
});

Aber geht das nicht auch einfacher?

 

[kkapsner]

Was willst du mit diesen Bildern denn am Ende des Tages machen? Auf einen Server laden? Wenn ja, kommst du sowieso an etwas Komplizierteren nicht vorbei.

 

[Elma]

Hi.

Ja, der User soll die Möglichkeit haben, Screenshots und Bilder aus der Zwischenablage direkt ohne Umweg über eine lokale Datei, hochladen können.

Den Code habe ich mittlerweile deutlich vergrößert. So wird mittlerweile alles, was kein verwertbares Bild ist, aus dem Div wieder entfernt. (Also z.B. Text oder Bilder die nicht als Blob vorliegen sondern nur als Referenz).
Das Bild wird dann auch noch durch ein canvas geschleust, skaliert und komprimiert.

Am Hochladevorgang bin ich noch nicht dran. Ist das sehr kompliziert?

 

[kkapsner]

Ist das sehr kompliziert?

Nicht besonders. Du kannst hald bei deinem Problem nicht die Standardansätze für Dateiupload verwenden.

 

[Elma]

Also falls es mit Post Requests nicht geht, muss ich auf Ajax/Websockts ausweichen.
Neben dem einfachen Upload von Screenshots bzw Bildern aus der Zwischenablage sollen irgendwann auch Standbilder von der Webcam oder Videograbber o.ä unterstützt werden.
Ajax/Websockets muss ich für mein Projekt aber ohnehin realisieren.