External Images to greyscale

Question

I am working on a small project on my university and I met a problem with applying grayscale to externally loaded images from Google's Picasa servers in my banner. I try to create a greyscale canvas of any image loaded but when trying to get image data i can see Security Error.

I am using jQuery, HTML, PHP and Ajax languages.

Whole project you can find here: Google Code Project

I tried to use this library: $getImageData

But i get an information that my request cannot be handled. I also tried many other libraries and codes but without result.

Provide the code that gives an error and the error details. – Ranty Dec 18 '12 at 22:41 — Ranty, Dec 18 '12 at 22:41
Where is greyscale.js in that project? – Kevin B Dec 18 '12 at 22:43 — Kevin B, Dec 18 '12 at 22:43

score 0 · Answer 1 · answered Dec 18 '12 at 22:48

You are making a cross-domain request using the "json" datatype which isn't a valid cross-domain data-type. You should be getting a same origin error. You need to switch to the jsonp datatype.

jQuery('.container').ready(function() {
    jQuery.ajax({
        type: 'GET',
        dataType:'jsonp',
        url: 'https://picasaweb.google.com/data/feed/base/user/115131339234962778181/album/jsite?access=public&kind=photo&alt=json-in-script',

Note, i also changed the url, don't miss that change, it's important.

https://developers.google.com/gdata/docs/json

score 0 · Answer 2 · answered Dec 18 '12 at 23:02

0

When you paint external data onto a canvas, it is marked as tainted. Tainting disables your ability to get the image data back from the canvas. However, you should be able to change that behavior using the .crossOrigin attribute

answered Dec 18 '12 at 23:02

marcus erronius

3,613
1
16
32

External Images to greyscale

2 Answers2