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

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

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

 /*html*/<div id=qrcode>div><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)}

今天暫時寫到這裡，歡迎分享其他關於canvas的應用程式。希望對大家的學習有幫助，也希望大家多多支持VeVb武林網。