Ontem apresentei um plug-in para geração de códigos QR, QRCode.js, que é desenhado com a ajuda do HTML5 Canvas. Então, o protagonista de hoje é a tela – a aplicação prática da tela.
1. Baixe o código QRHTMLCanvasElement fornece o método toDataURL, que retorna um URI de dados contendo o formato de representação de imagem especificado pelo parâmetro type. Através deste método podemos gerar uma imagem de código QR e baixá-la. Os exemplos são os seguintes:
/*html*/<div id=qrcode>div><a href=javascript:; download=código QR id=down>Baixar código QR</a>/*js*/var canvas = document.getElementsByTagName(' canvas' )[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('imagem/png') 2. Adicione marca d'água às fotosVocê pode adicionar facilmente marcas d’água a imagens usando os métodos fillText e drawImage do canvas. Os exemplos são os seguintes:
/*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // Cria elemento img var canvas = document.getElementById('canvas')var ctx = canvas.getContext ('2d');img.src = 'myImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0);Por hoje é tudo. Bem-vindo a compartilhar outras aplicações do canvas. Espero que seja útil para o aprendizado de todos e também espero que todos apoiem a Rede VeVb Wulin.