Skip to content

Commit 6109809

Browse files
committed
Update Readme to provide instructions for Enabling CORS on S3 buckets.
1 parent ec56f1c commit 6109809

File tree

1 file changed

+16
-1
lines changed

1 file changed

+16
-1
lines changed

README.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,22 @@ $('img.my-image').on('ab-color-found', function(payload){
6262

6363
Caveats
6464
--------------
65-
This plugin utlizes the `<canvas>` element and the `ImageData` object, and due to cross-site security limitations, the script will fail if one tries to extract the colors from an image not hosted on the current domain, *unless* the image allows for [Cross Origin Resource Sharing](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). This plugin is built on top of a script called [RGBaster](https://github.com/briangonzalez/rgbaster.js).
65+
This plugin utlizes the `<canvas>` element and the `ImageData` object, and due to cross-site security limitations, the script will fail if one tries to extract the colors from an image not hosted on the current domain, *unless* the image allows for [Cross Origin Resource Sharing](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing).
66+
67+
To enable CORS for images hosted on S3 buckets follow the Amazon guide [here](http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html); adding the folloing to the buckets CORS configuration
68+
```xml
69+
<CORSRule>
70+
<AllowedOrigin>*</AllowedOrigin>
71+
<AllowedMethod>GET</AllowedMethod>
72+
</CORSRule>
73+
```
74+
75+
For all images you should also include a cross-origin attribute in your image
76+
```html
77+
<img src="/image.jpg" data-adaptive-background='1' cross-origin="anonymous" />
78+
```
79+
80+
This plugin is built on top of a script called [RGBaster](https://github.com/briangonzalez/rgbaster.js).
6681

6782
Author
6883
-------

0 commit comments

Comments
 (0)