About how to download QR codes and add watermarks to images on canvas

This article mainly introduces the relevant information on the method of downloading QR codes and adding watermarks to images on canvas. The content is quite good. I will share it with you now and give it as a reference.

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

1. Download the QR code (See how to generate the QR code)

HTMLCanvasElement provides the toDataURL method, This method 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*/
<p id="qrcode">p>
<a href="javascript:;" download="二维码" id="down">下载二维码</a>

/*js*/
var canvas = document.getElementsByTagName(&#39;canvas&#39;)[0];
var downImg = document.getElementById(&#39;down&#39;)
img.href = document.getElementsByTagName(&#39;canvas&#39;)[0].toDataURL(&#39;image/png&#39;)

2. Adding watermarks to pictures

Using the fillText and drawImage methods of canvas can easily add watermarks to pictures. An example is as follows:

/*html*/
<canvas id="canvas"></canvas>

/*js*/
var img = new Image();   // 创建img元素
var canvas = document.getElementById(&#39;canvas&#39;)
var ctx = canvas.getContext(&#39;2d&#39;);
img.src = &#39;myImage.png&#39;;

img.onload = function(){
    ctx.drawImage(img, 0, 0);
    ctx.font="30px yahei";   //设置水印文字
    ctx.fillText("大前端", 1100, 260)
}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use canvas to achieve image mosaic

The above is the detailed content of About how to download QR codes and add watermarks to images on canvas. For more information, please follow other related articles on the PHP Chinese website!