Search code examples
javascriptcanvascross-domaincamanjsvelo

How can I use camanjs for my wix application bypassing crossdomain problems?


I'm working on application for wix.com that represents slider for users images. Recently I got task to make images filters just like instagram for this project, and first idea was to use canvas for this purpose specifically CamanJS. And as you undestand from the question title, I got stuck with canvas crossorigin problem.

I've tried to use svgjs and its filters, and on localhost it works great for remote images, but it doesn't work on wix(maybe it doesn't work with angular on which our project's written)

Also I've tried http://crossorigin.me/, added it to every image link, but nothing seems to happen, CamanJS breakes images just like without this proxy.

And don't get me wrong, I've tested 4 diffrent js libraries and everyone built on canvas manipulation.

So is there another way to bypass this problem? I've heard about php proxies, but I got a little experience in webdev(about 4 months), so I dont get an idea how to use it.


Solution

  • You can't avoid it regardless of which library is being used as it is a browser feature/mechanism.

    You could as you state, use proxies (such as the one you mention, though be careful with those). However, using a proxy on its own is not enough. You will also have to request cross-origin usage and you can do this by adding this property to the image element before setting its source:

    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
    

    Or if you have an image tag:

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

    Have in mind though that if the requested server refuses the image may not be loaded at all.

    Alternatively, look into commercial agreements with sites such as imgur.com (I'm not affiliated) which do allow cross-origin use.