Fügen Sie ein Bild aus der Zwischenablage mit JavaScript

Wie wir fügen Sie ein Bild aus der Zwischenablage in eine benutzerdefinierte rich-text-editor mit javascript? (Strg+c und Strg+v, oder eine Momentaufnahme).

Hat jemand verwendet, Ajax rich-text-editor? Funktioniert das einfügen eines Bildes aus der Zwischenablage zu Ajax RTE Arbeit?

Bitte teilen Sie Ihre Gedanken!

Dank!

AJAX wird im Allgemeinen als eine Technologie... hat eine tatsächliche web-dev-Organisation ernsthaft sich selbst den Namen AJAX? Sie sind nur ärger.
Gut, in Anbetracht der name AJAX wurde abgezockt von einem mythischen griechischen Krieger (egal, was Sie behaupten es ist ein Akronym), was eine weitere Schicht abreißen?
möglich, Duplikat der Wie funktioniert das einfügen Bild aus der Zwischenablage funktioniert in Gmail und dem Google Chrome 12+?

InformationsquelleAutor kani | 2009-01-29

30

Weil diese Frage immer noch oft zeigt sich in den Suchergebnissen von Google, auf die ich hinweisen möchte dies heute möglich ist, ~~zumindest in Google Chrome (2011)~~ in allen modernen Browsern (2018). Sie setzte es für den Einsatz in GMail, aber es ist verfügbar für alle websites.

Wie funktioniert das einfügen Bild aus der Zwischenablage funktioniert in Gmail und dem Google Chrome 12+?

Es ist nun möglich, in anderen Browsern. Ich bin mit FF17 und verwenden können imgur.com's einfügen aus der Zwischenablage-Funktionalität
es ist ein handliches Modul, für das jetzt... github.com/layerssss/paste.js

InformationsquelleAutor max.weller
13

Dies ist definitiv möglich, jetzt in Chrome und Firefox. Ich bin nicht so sicher über IE/Safari.

Anschauen imgur.com, onpaste, und Pappe.co als Beispiele, und sehen Sie die code für Pappe auf github sowie Joel ausgezeichnete schreiben in seinem blog

Für die Aufzeichnung, die Sie benötigen, den Benutzer zum drücken von Strg+V auf ein element, und dann können Sie erfassen die Daten in der einfügen event-handler durch das Lesen von event.clipboardData aber es funktioniert-down-Ebene, die Sie benötigen, um den Fokus auf eine leere contenteditable element, und ziehen Sie die Ergebnisse von dort, was nicht funktioniert gut in Firefox 22. Sehen hier

"Arbeitsbereich".co funktioniert auch mit IE/Safari

InformationsquelleAutor Jaykul
10

Neue Browser, wie Firefox 4, Unterstützung einfügen von Bild Daten aus der Zwischenablage in eine RTE als Daten URI-kodiert PNG-Daten. Jedoch, die meisten web-Anwendungen falsch analysieren, Daten-URIs und entsorgen Sie Sie. Yahoo-mail korrekt verarbeitet. Aber Gmail und Hotmail zu verwerfen. Ich habe mitgeteilt, Google und Microsoft über dieses.

InformationsquelleAutor Saqib Ali
10

Jetzt fand ich die clipboardData-Objekt .

Aber es abrufen von nur-text-format oder URL aus der Zwischenablage.
clipboardData ist nur IE, es funktioniert mit Zeichen-string und gibt null zurück, wenn wir fügen Sie ein Bild.

einen test Beispiel
```
 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>
```
Standardmäßig Zugriff auf die Zwischenablage nicht aktiviert ist firefox, Erklärung hier.
Auf der anderen Weise, execCommand() nur text, die Werte und ist nicht Firefox kompatibel.

Wie die anderen gesagt haben, die Tatsache, dass der code funktioniert im IE ist ein Sicherheitsrisiko, kann jede Seite den Zugriff auf Ihre Zwischenablage text.

Die einfachste Methode zum kopieren von Bildern relativen URL ist die Verwendung eines java-Applets, windows activeX-plugin, .net-code oder per drag und drop.

Ist es möglich, zum abrufen von Bild aus der Zwischenablage Daten mit javascript?
Das können Sie nicht. Um ehrlich zu sein habe ich noch nicht getestet mit "native security deaktiviert" - Einstellungen, aber soweit ich gesucht, es gibt keinen Weg für diesen.
Sie können es in Google Mail, daher ist es möglich.

InformationsquelleAutor
3

Anderen zu helfen, ich lasse den link hier mit der Antwort von Nick Rattalack
```
//window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); //will give you the mime types
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function(event){
        console.log(event.target.result)}; //data url!
      reader.readAsDataURL(blob);
    }
  }
}
```
Wie funktioniert das einfügen Bild aus der Zwischenablage funktioniert in Gmail und dem Google Chrome 12+?

Tipp: verwenden Sie url.createObjectURL statt dem filereader
url.createObjectURL irgendwie schaffen Sie nur eine URL, die arbeiten in der Sitzung, nicht aber für die Speicherung in der Datenbank. FileReader() funktioniert sehr gut für das base64-Bild.
Sie können ganz einen blob speichern in einer Datenbank mit XMLHttpRequest ohne FileReader Nutzung. Sie können auch speichern, URI (einschließlich URLs) in eine Datenbank in der gleichen fashion, und speichern Sie eine URI mit data Schema wird tatsächlich speichern die Ressource selbst (denn das ist, wie data URIs arbeiten). Was Sie versuchen, zu beschreiben, ist, dass eine URL, die über einen Aufruf URL.createObjectURL werden nur innerhalb einer bestimmten "session" (je nach user-agent) und ist damit bedeutungslos außerhalb der Sitzung, z.B. bei der Erteilung einer Anfrage zum speichern einer Ressource in einer Datenbank.

InformationsquelleAutor Emanuel
1

Leider, Es ist nicht möglich, fügen Sie ein Bild aus Ihrer Zwischenablage in den RTE.

Wenn Sie ein blob aus einer desktop-Anwendung wie Microsoft Word, enthält ein Bild und etwas text, wird das Bild wiederum zu einem gebrochenen Verweis (obwohl die Proportionen genau richtig sein), und der text wird eingefügt wurden (Formatierung verloren gehen).

Die einzige Sache, die möglich ist, kopieren Sie ein Bild in den RTE und fügen Sie wieder in den RTE.

Nicht mehr korrekt.

InformationsquelleAutor aleemb

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.