How to download QR code and watermark images on canvas

Yesterday I introduced a plug-in for generating QR codes, QRCode.js, which is drawn with the help of HTML5 Canvas. So, today’s protagonist is canvas – the practical application of canvas.

HTMLCanvasElement provides the toDataURL method, which returns a data URI containing the image representation format specified by the type parameter. Through this method we can generate a QR code image and download it. Examples are as follows:

 /*html*/<div id=qrcode>div><a href=javascript:; download=QR code id=down>Download QR code</a>/*js*/var canvas = document.getElementsByTagName(' canvas')[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')

You can easily add watermarks to images by using the fillText and drawImage methods of canvas. Examples are as follows:

 /*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // Create img element var canvas = document.getElementById('canvas')var ctx = canvas.getContext ('2d');img.src = 'myImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; //Set watermark text ctx.fillText(large front end, 1100, 260)}

That’s all for today. Feel free to share other applications of canvas. I hope it will be helpful to everyone’s learning, and I also hope everyone will support VeVb Wulin Network.