關於canvas下載二維碼和圖片加浮水印的方法

這篇文章主要介紹了canvas 下載二維碼和圖片加浮水印的方法的相關資料,內容挺不錯的，現在分享給大家，也給大家做個參考。

昨天介紹了一個產生二維碼的插件QRCode.js，它是藉助HTML5 Canvas繪製而成。所以，今天的主角就是canvas啦–canvas的實際應用。

一、下載二維碼（查看如何產生二維碼#）

HTMLCanvasElement提供了toDataURL方法，此方法傳回一個包含被類型參數規定影像表現格式的data URI。透過該方法我們就可以產生二維碼圖片並下載了。範例如下：

/*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;)

二、圖片加浮水印

利用canvas的fillText和drawImage方法可以輕鬆實現為圖片加浮水印。範例如下：

/*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)
}

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何使用canvas實作圖片馬賽克

以上是關於canvas下載二維碼和圖片加浮水印的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！