這篇文章主要介紹了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('canvas')[0]; var downImg = document.getElementById('down') img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')
二、圖片加浮水印
利用canvas的fillText和drawImage方法可以輕鬆實現為圖片加浮水印。範例如下:
/*html*/ <canvas id="canvas"></canvas> /*js*/ var img = new Image(); // 创建img元素 var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d'); img.src = 'myImage.png'; img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font="30px yahei"; //设置水印文字 ctx.fillText("大前端", 1100, 260) }
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
以上是關於canvas下載二維碼和圖片加浮水印的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!