Wie lade ich ein .jpg von einem URI zur Leinwand?

Ich versuche eine JPG-Datei auf einer Leinwand zu laden, aber es funktioniert nicht.Wie lade ich ein .jpg von einem URI zur Leinwand?

Ich bin mit einem Code, der aber nicht mit meinem Bild arbeitet. Kann jemand helfen und erklären, was passiert?

Dieser Code das Bild nicht zeigen:

http://jsfiddle.net/mcepc44p/127/

Dieser Code zeigt das Bild:

http://jsfiddle.net/mcepc44p/2/

Der einzige Unterschied zwischen den Geigen, ist dies:

In die erste Geige,

image.src = "https://img.olx.pt/images_olxpt/880146485_1_1000x700_conjunto-de-sofs-terno-em-couro-verdadeiro-lisboa.jpg"

und die letzte Geige,

image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

Einige Hinweise?

Mit besten Grüßen,

Quelle

2016-08-24 André

das Problem ist, erlaubt die zweite Seite CORS, die erste nicht –

Ja, Sie sagen, dass 'image.crossOrigin = 'anonymous;' aktiviert CORS. Nicht, wenn die Seite es nicht erlaubt, tut es nicht. – ManoDestra

_ "Einige Hinweise?" _ - Browserkonsole! – CBroe

Es ist ein CORS Problem.

Lesen Sie mehr über es hier: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Relevante hier ::

Diese Cross-Origin-Sharing-Standard verwendet wird für Cross-Site-HTTP-Anforderungen zu aktivieren:

Bilder/Video Rahmen, die unter Verwendung von drawImage auf eine Leinwand gezeichnet werden

Kurz gesagt: Der Server Ihnen das Bild in der zweiten Geige fügt eine Antwort-Header Access-Control-Allow-Origin:*, der erste Server tut dient nicht.

Dies führt zu Ihrem Browser aus dem Bild blockiert in einem Canvas-Elemente gezogen werden.

Quelle

2016-08-24 14:35:52 Christoph

Danke. Ich habe die Anfrage von einem Bild in meinem Server gemacht und es funktioniert. Vielen Dank! –

"* Dies führt dazu, dass Ihr Browser verhindert, dass das Bild in einem Canvas-Element gezeichnet wird." * Das stimmt nicht: Es veranlasst die Browser, die das crossOrigin-Attribut unterstützen, ein Fehlerereignis auszulösen und das Bild überhaupt nicht zu laden – Kaiido

Der zweite Standort sendet diesen Header:

Access-Control-Allow-Origin →*

Welche Anfragen Quer Herkunft ermöglicht. Es liegt beim Server zu diktieren, ob auf seine Assets über Kreuzherkunftsanforderungen zugegriffen werden kann, nicht über den Client.

Die erste Website diesen Header gar nicht senden, damit Ihre Cross Ursprungsanforderung disallowing. Du bist also nicht in der Lage, das zu tun, was du mit diesem Bild machen willst.

Weitere Informationen here und here.

Quelle

2016-08-24 14:52:11 ManoDestra

Das Bild wird geladen und angezeigt. Das Problem besteht darin, dass Sie versuchen, die im Bild enthaltenen Daten zu erhalten, die dann einen Sicherheitsfehler auslösen. Wenn Sie die canvas.toDataURL entfernen, können Sie das Bild anzeigen.Wenn Sie es herunterladen möchten, legen Sie einfach den Download Link Ref auf die Bild-URL

Quelle

2016-08-24 16:05:08 Blindman67

Wenn das crossOrigin-Attribut festgelegt ist und der Server die richtigen Header nicht sendet, wird das Bild einen Fehler auslösen und nie laden. – Kaiido

Wie lade ich ein .jpg von einem URI zur Leinwand?

Antwort

Verwandte Themen