Dado um URL de dados, você pode criar uma imagem (na página ou puramente em JS) configurando o src
da imagem para o URL de seus dados. Por exemplo:
var img = new Image;
img.src = strDataURI;
O drawImage()
método do HTML5 Canvas Context permite copiar toda ou parte de uma imagem (ou tela, ou vídeo) em uma tela.
Você pode usá-lo assim:
var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;
Edit : Eu sugeri anteriormente neste espaço que pode não ser necessário usar o onload
manipulador quando um URI de dados está envolvido. Com base em testes experimentais desta questão , não é seguro fazê-lo. A sequência acima - crie a imagem, defina o onload
para usar a nova imagem e, a seguir, defina o src
- é necessária para alguns navegadores usarem os resultados com segurança.