2016-04-27 8 views
0

Я работаю над приложением для wix.com, которое представляет собой слайдер для изображений пользователей. Недавно у меня появилась задача сделать фильтры изображений такими же, как instagram для этого проекта, и первая идея заключалась в том, чтобы использовать холст для этой цели специально для CamanJS. И поскольку вы не указали из названия вопроса, я застрял в проблемах с крестиком на холсте.Как я могу использовать camanjs для моего приложения wix в обход проблем с crossdomain?

Я пытался использовать svgjs и его фильтры, а на локальном хосте работает отлично подходит для удаленных изображений, но он не работает на WiX (возможно, он не работает с угловым, на котором написан наш проект)

Также я пробовал http://crossorigin.me/, добавлял его к каждой ссылке на изображение, но ничего не происходит, CamanJS искажает изображения так же, как без этого прокси.

И не поймите меня неправильно, я протестировал 4 разных js-библиотеки и все построили на манипуляциях с холстом.

Так есть ли другой способ обойти эту проблему? Я слышал про прокси php, но у меня был небольшой опыт работы в webdev (около 4 месяцев), поэтому я не понимаю, как его использовать.

+0

Было бы полезно, если вы объясните, какие фильтры изображений необходимы. Некоторые из них вы можете достичь с помощью css. Посмотрите здесь: http://html5-demos.appspot.com/static/css/filters/index.html – kabaehr

+0

Наберите «cross-origin холст» в окне поиска Stackoverflow. Если вам не нужно экспортировать изображения, вы можете использовать фильтры CSS. – markE

ответ

0

Вы не можете избежать этого, независимо от того, какая библиотека используется, поскольку это функция/механизм браузера.

Вы можете, как вы заявите, использовать прокси (например, тот, который вы упомянули, хотя будьте осторожны с ними). Однако использовать прокси-сервер сам по себе недостаточно. Вы также должны запросить использование кросс-происхождения, и вы можете сделать это, добавив это свойство элемента изображения перед установкой его источник:

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 

Или если у вас есть тег изображения:

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

Имейте в виду, что если запрашиваемый сервер откажется, изображение может вообще не загружаться.

В качестве альтернативы, ознакомьтесь с коммерческими соглашениями с такими объектами, как imgur.com (я не являюсь аффилированным лицом), которые позволяют использовать перекрестное происхождение.

+0

'' отлично работает, спасибо большое! –