Usando imagens externas com canvas ‘getImageData () e toDataURL ()

Lidar com recursos externos de domínio cruzado pode ser uma grande frustração ao manipular imagens na tela.

No entanto, existe uma solução muito simples para evitar todos os erros de segurança malucos que um navegador pode lançar em você.

Você simplesmente precisa definir o método da tela .crossOrigin como uma string vazia.

Igual a:

img.crossOrigin = '';

E algum código de exemplo:

var img = document.createElement('img');
img.onload = function(e) {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var url = canvas.toDataURL(); // Read succeeds, canvas won't be dirty.
};
img.crossOrigin = '';
img.src = 'http://other-domain.com/image.jpg';

(Observação: o site do qual você está obtendo a imagem deve ser compatível com a especificação CORS.)

Referências:

• The Chromium Blog
• O mais recente em HTML5 por Eric Bidelman