Ein Foto mit nur JavaScript beschneiden, das eine URL als Eingabe akzeptiert

Question

Gibt es eine Möglichkeit, ein Foto nur mit clientseitigem JavaScript zu beschneiden?

Wenn ich nach einem solchen Tool suchte, verwendet der JavaScript-Teil immer DHTML, um dem Benutzer einfach zu ermöglichen, den zu beschneidenden Bereich eines Bildes auszuwählen und diese Informationen dann an ein serverseitiges Skript (z. B. ASP, PHP) zu senden tatsächlich die Ernte durchführen.

Ich stelle fest, dass JavaScript keine Dateien erstellen oder anfordern kann, aber ich denke, dass Problemumgehungen möglich sein sollten. Soweit es eingegeben wird, möchte ich, dass die JavaScript-Datei eine URL eines Bildes aufnimmt. Dies ist einfach und Sie können einfach ein <image> Element erstellen, um es anzuzeigen. Was die Ausgabe angeht, habe ich auf eine data URI Lösung gehofft.

Severalsolutions existieren, aber wenn ich versuche, sie (http://jsfiddle.net/sfjsfid/skm6V/1/) verwenden, erhalte ich die Fehlermeldung:

Uncaught Error: SECURITY_ERR: DOM Exception 18

Der Grund, warum dies passiert ist, weil die specification heißt es, dass dieser Fehler erzeugt werden muss, wenn Sie ein fordern Bild aus einer anderen Domäne als wo die Seite gehostet wird.

Gibt es eine andere Möglichkeit, eine reine clientseitige JavaScript-Lösung zum Zuschneiden von Bildern zu verwenden, die aus einer anderen Domäne stammen können?

Wenn ich versuche, ein Daten-URI anstelle eines Bildes aus einer anderen Domäne (http://jsfiddle.net/VX2z2/) zu verwenden, funktioniert es korrekt. Um jedoch eine URL als Eingabe für ein Bild verwenden zu können, müsste ich sie irgendwie in einen Daten-URI umwandeln. Die Verwendung einer Arbeitsfläche funktioniert nicht, weil die Sicherheitsprobleme bereits besprochen wurden. Selbst wenn ich einen Webdienst finde, den ich verwenden könnte, würde es auch nicht funktionieren, denn dann würde ich eine Ajax-Anfrage an eine externe Domäne senden, was ein weiteres Sicherheitsrisiko darstellt, das vom Browser blockiert wird.

Hosting meiner eigenen Version eines Web-Service oder Hosting-Server Seitencode ist keine Option.

Irgendwelche anderen Ideen? Oder ist die einzige Option, um ein Daten-URI als Eingabe zu akzeptieren?

Answer 1

Wenn Sie das Sicherheitsmodell brechen wollen, müssen Sie etwas anderes als eine Webanwendung tun - zum Beispiel eine Firefox-Erweiterung. Dies würde Ihnen zusätzliche Privilegien geben, um Anfragen zu stellen und sogar das Bild zu speichern.

Answer 2

Es gibt keine Möglichkeit, das Sicherheitsmodell zu umgehen. Sie benötigen eine serverseitige Hilfe, um Daten von einer anderen Domäne anzufordern und über JavaScript darauf zuzugreifen.