2016-04-27 30 views
0

Ich arbeite an einer Anwendung für wix.com, die Schieberegler für Benutzer Bilder darstellt. Vor kurzem hatte ich die Aufgabe, für dieses Projekt Bildfilter wie Instagram zu machen, und die erste Idee war, CamanJS speziell für diesen Zweck zu verwenden. Und als du vom Fragetitel entblößt bist, bin ich mit Canvas Crossorigin Problem stecken geblieben.Wie kann ich camanjs für meine wix-Anwendung verwenden, um Cross-Domain-Probleme zu umgehen?

Ich habe versucht svgjs und seine Filter zu verwenden und auf localhost funktioniert es ideal für Remote-Bilder, aber es auf Wix nicht funktioniert (vielleicht ist es nicht mit Winkel arbeiten, auf dem geschrieben unser Projekt)

Auch ich habe versucht http://crossorigin.me/, fügte es zu jedem Bild Link, aber nichts scheint zu passieren, bricht CamanJS Bilder wie ohne diesen Proxy.

Und verstehen Sie mich nicht falsch, ich habe 4 verschiedene js Bibliotheken getestet und jeder auf Leinwand Manipulation.

Gibt es eine andere Möglichkeit, dieses Problem zu umgehen? Ich habe von PHP-Proxies gehört, aber ich habe ein wenig Erfahrung in Webdev (ca. 4 Monate), also habe ich keine Ahnung, wie man es benutzt.

+0

Wäre hilfreich, wenn Sie erklären, welche Bildfilter benötigt werden. Einige von ihnen konnte man mit CSS erreichen. Schauen Sie hier: http://html5-demos.appspot.com/static/css/filters/index.html – kabaehr

+0

Geben Sie "canvas cross-origin" in das Suchfeld von Stackoverflow ein. Wenn Sie die Bilder nicht exportieren müssen, können Sie CSS-Filter verwenden. – markE

Antwort

0

Sie können es nicht vermeiden, unabhängig davon, welche Bibliothek verwendet wird, da es sich um eine Browserfunktion handelt.

Sie könnten, wie Sie sagen, verwenden Sie Proxys (wie die, die Sie erwähnen, obwohl vorsichtig mit denen). Die Verwendung eines eigenen Proxy reicht jedoch nicht aus. Sie werden auch Cross-Origin-Nutzung haben zu verlangen, und Sie können dies tun, indem Sie diese Eigenschaft auf das Bildelement hinzugefügt vor seiner Quelle Einstellung:

var img = new Image; 
img.onload = function() {...}; // your callback here 
img.crossOrigin = "anonymous"; // make request to use image cross-origin 
img.src = "url/to/proxy";   // send request/start loading 

Oder wenn Sie ein Bild-Tag:

<img crossOrigin="anonymous" src="..."> 

Bedenken Sie jedoch, dass das Bild möglicherweise nicht geladen wird, wenn der angeforderte Server dies verweigert.

Alternativ, schauen Sie in kommerzielle Vereinbarungen mit Websites wie imgur.com (ich bin nicht angegliedert), die Cross-Origin-Verwendung ermöglichen.

+0

'' funktioniert super, vielen Dank! –