欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

HTML5在線視頻教程canvas下載二維碼和圖片加水印的方法

2018-04-25 14:04:48 1962瀏覽

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";//設置水印文字
ctx.fillText("大前端",1100,260)
}

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

【關注微信公眾號獲取更多學習資料】

查看更多關于“HTML5開發(fā)技術資訊”的相關文章>>