Cómo descargar códigos QR e imágenes de marcas de agua en lienzo

Ayer presenté un complemento para generar códigos QR, QRCode.js, que se dibuja con la ayuda de HTML5 Canvas. Así pues, el protagonista de hoy es el lienzo: la aplicación práctica del lienzo.

HTMLCanvasElement proporciona el método toDataURL, que devuelve un URI de datos que contiene el formato de representación de la imagen especificado por el parámetro de tipo. A través de este método podemos generar una imagen de código QR y descargarlo. Los ejemplos son los siguientes:

 /*html*/<div id=qrcode>div><a href=javascript:; descargar=código QR id=down>Descargar código QR</a>/*js*/var lienzo = document.getElementsByTagName(' lienzo' )[0];var downImg = document.getElementById('abajo')img.href = document.getElementsByTagName('lienzo')[0].toDataURL('imagen/png')

Puede agregar fácilmente marcas de agua a las imágenes utilizando los métodos de lienzo fillText y drawImage. Los ejemplos son los siguientes:

 /*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // Crear elemento img var canvas = document.getElementById('canvas')var ctx = canvas.getContext ('2d');img.src = 'miImagen.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; //Establecer texto de marca de agua ctx.fillText(frontal grande, 1100, 260)}

Eso es todo por hoy. No dudes en compartir otras aplicaciones de Canvas. Espero que sea útil para el aprendizaje de todos y también espero que todos apoyen VeVb Wulin Network.