Estoy escribiendo un guión (o editando y pirateando cosas juntos) para editar el aspecto de las imágenes en una página. Sé lo básico de javascript pero esta es la primera vez que veo un lienzo. así que tengan paciencia conmigo

Estoy recibiendo este error:

No se pueden obtener datos de imagen del lienzo porque el lienzo ha sido contaminado por datos de origen cruzado.

Así que aquí está mi fragmento de código lanzando el error:

var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            height = img.naturalHeight || img.offsetHeight || img.height,
            width = img.naturalWidth || img.offsetWidth || img.width,
            imgData;


        canvas.height = height;
        canvas.width = width;
        context.drawImage(img, 0, 0);

        console.log(context);
        try {
            imgData = context.getImageData(0, 0, width, height);
        } catch(e) {}

ahora he encontrado este post:

http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/

pero no tengo idea de cómo hacer que se ajuste a mis necesidades ...

Sé que todo se debe a la seguridad y todo eso, pero ¿hay alguna solución para que todo suceda?

Gracias

EDITAR

Oh, espera ... el error se debe a que no puedes obtenerImageData ... así que hay que hacerlo para que sea 'local'