Fehler beim ausführen der 'getImageData' - Die Leinwand wurde dieses Bild durch cross-origin-Daten

Ich bin daran interessiert, mit smartcrop.js mit einige Nutzer hochgeladenen Bildern auf meiner Website. Ein Benutzer kann ein Bild hochladen beliebiger Größe an meinen Amazon S3-bucket. Das Bild wird dann dem Benutzer zugeordnet und, wenn Sie besuchen Ihr Profil Sie können sehen, die Bilder beschnitten, schön. Wenn ich versuche, und führen eine Art von manipulation mit smartcrop auf ein Bild-element bekomme ich die Fehlermeldung:

smartcrop.js:282 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Dieser reproduziert werden kann, mit den folgenden Schritten:

var image = new Image();
image.src = "https://freelancestudent.s3.amazonaws.com/files/google.png"
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});
smartcrop.js:282 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Ich habe die CORS-Konfigurations-editor in meinem S3 control panel und es sieht wie folgt aus:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Mein Verständnis war, dass <AllowedOrigin>*</AllowedOrigin> bedeuten sollte, dieses problem sollte nicht bestehen? Ich gelesen habe eine Lösung, ich konnte speichern Sie das Bild auf dem server zu sehen ist, aber ich möchte Euch meine statischen Dateien und der Produktions-server zu trennen. Irgendwelche Ideen?

Auf der Suche auf die Antwort nach freelancestudent.s3.amazonaws.com/files/google.png in meinem browser, es enthält nicht beliebiger CORS-related Header.
Wenn ich dann abgespeichert habe die CORS-Konfiguration, wie oben, Eimer, warum sollte es nicht enthalten die relevanten Header?
Möglich, Duplikat der Wie zu beheben getImageData () - Fehler-Die Leinwand wurde dieses Bild durch cross-origin-Daten?

InformationsquelleAutor Nanor | 2016-05-03

  1. 7

    War ich in der Lage, diese arbeiten, durch die änderung meiner CORS Regeln leicht:

    <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

    Und Einstellung crossOrigin zu anonymous auf dem Bild:

    image.crossOrigin = 'anonymous';

    Vollen Satz von Befehlen:

    var image = new Image();
image.crossOrigin = 'anonymous';
image.src = "https://s3-us-west-2.amazonaws.com/boom-orca/people-deal-header.png";
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});

    Screenshot:

    Fehler beim ausführen der 'getImageData' - Die Leinwand wurde dieses Bild durch cross-origin-Daten

    InformationsquelleAutor JMK

Schreibe einen Kommentar