mastababa / loremflickr Goto Github PK

Hey there

I'm new to programming but I'm fairly sure there's a problem with trying to manipulate image data on a canvas with an image on it that is hosted on loremflickr. This problem arises from a security issue with cross-orgin data in which the getImageData() call on a canvasrenderingcontext object will throw an error. This happens when using images from a non CORS-friendly host. I was hoping there was something you could do on your end to rectify it.

Cheers

It would be very useful in certain cases, especially in larger prototypes, to get some consistency in which random images are shown where on a page.

I'm aware that browser caching makes this possible to some degree by adding meaningless query strings to URLs, but I'd like for this to also work across different browsers and machines. (It's a little distracting if working with another developer and the page looks totally different on their screen.)

One way to achieve this would be to allow some user-provided string as part of the URL (whether query string or another slash-separated chunk). On the server side this would be hashed with whatever hashing algorithm is cheap, and then that hash wrapped into an integer. That integer can then be used to choose an image (such as $possibleImages[$integer % count($possibleImages)]), or the integer or hash or string can be used to seed the random number generator, or some other such scheme. The important thing is a repeatable result.

It wouldn't have to always produce the same image forever -- if the same string gave a different image a week or two down the line that's no big deal.

A possible extra benefit of something like this is that when such a request is served, it could have long caching headers attached to it, since you'd expect to serve the same image the next time the same request comes through. This would make LoremFlickr much more cachable (by a CDN proxy for example, or development teams' in-house caching HTTP proxies, etc) for such requests, hopefully reducing load on your end.

Will it be possible to only require one dimension for the resolution?
For example, if I go to "http://loremflickr.com/320/dog" it will get a dog picture with an X resolution of 320 and any Y resolution, or even just "http://loremflickr.com/dog" to get a dog picture with any resolution.
Or is that a flickr API restriction?

I'm using loremflickr.com and it works perfectly! The response time is not perfect, but works better than many other well known placeholder websites :)

I hope you keep it running!

HI,
When a picture is loaded from cache header Access-Control-Allow-Origin: * is missing.

Access to Image at 'http://loremflickr.com/cache/images/9613e56670c083e23db82f469d199252.53.jpg' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

Could you add those headers please?

Thanks for sharing!.
After editing the variables in initialize.php. I am getting an empty image