This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Vladimir Strashkov
Posted Jan 10 - Read on Facebook

Framer, What to do, if the module that worked in previous versions doesn't work in current? Here is the prototype: https://framer.cloud/GsHTW I tried to use vibrant.js to grab colors from images. It still works fine in Framer preview window, but not in the browser. Any ideas why?

2 Comments

Niels van Hoorn

I suspect this is an security issue. Because the images on framer.cloud are loaded from a different domain (s3.amazonaws.com), it's not possible to get the content from the canvas element, which vibrant needs to determine the color.

Niels van Hoorn

Ok, dove into this, and fixed a couple of things:
- First, I fixed our amazon S3 bucket to return Cross-Origin headers
- I updated your vibrant.coffee module file: set the target.img.crossOrigin = "anonymous" property before setting the source, so the browser sends the correct origin header, and only create the new Vibrant class once the image is loaded.

The result is here, hope this helps: https://framer.cloud/wffdB

Read the entire post on Facebook