扣丁學堂HTML5培訓之canvas下載二維碼和圖片加水印的方法

canvas下載二維碼和圖片加水印的方法有不少對HTML5開發(fā)感興趣或者是參加HTML5培訓的小伙伴不是很了解，下面小編就帶讀者們看一下扣丁學堂HTML5在線視頻教程講解的canvas下載二維碼和圖片加水印的方法，希望能幫到對HTML5開發(fā)感興趣的小伙伴們。

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

HTMLCanvasElement提供了toDataURL方法，該方法返回一個包含被類型參數(shù)規(guī)定圖像表現(xiàn)格式的dataURI。通過該方法我們就可以生成二維碼圖片并下載了。示例如下：

/*html*/ <divid="qrcode">div> <ahref="javascript:;"download="二維碼"id="down">下載二維碼</a> /*js*/ varcanvas=document.getElementsByTagName('canvas')[0]; vardownImg=document.getElementById('down') img.href=document.getElementsByTagName('canvas')[0].toDataURL('image/png')

二、圖片加水印

利用canvas的fillText和drawImage方法可以輕松實現(xiàn)給圖片加水印。示例如下：

/*html*/ <canvasid="canvas"></canvas> /*js*/ varimg=newImage();//創(chuàng)建img元素 varcanvas=document.getElementById('canvas') varctx=canvas.getContext('2d'); img.src='myImage.png'; img.onload=function(){ ctx.drawImage(img,0,0); ctx.font="30pxyahei";//設(shè)置水印文字 ctx.fillText("大前端",1100,260) }

關(guān)于canvas下載二維碼和圖片加水印的方法小編就簡單為大家說這么多，想要了解更多HTML5開發(fā)內(nèi)容的小伙伴可以登錄扣丁學堂官網(wǎng)查詢?？鄱W堂HTML5在線學習在行業(yè)內(nèi)有著良好的口碑，除了有專業(yè)的老師和與時俱進的課程體系之外，還有大量的HTML5基礎(chǔ)教程供學員觀看學習?？鄱W堂H5技術(shù)交流群：692172929。微信號：codingbb