首頁 > web前端 > H5教程 > 主體

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

不言
發布: 2018-06-14 11:28:22
原創
2223 人瀏覽過

這篇文章主要介紹了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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板