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

發(fā)布時間：2018-03-21 15:51:14 作者：cc

我要評論

這篇文章主要介紹了canvas 下載二維碼和圖片加水印的方法的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

昨天介紹了一個生成二維碼的插件QRCode.js，它是借助HTML5 Canvas繪制而成。所以，今天的主角就是canvas啦–canvas的實(shí)際應(yīng)用。

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

HTMLCanvasElement提供了toDataURL方法，該方法返回一個包含被類型參數(shù)規(guī)定圖像表現(xiàn)格式的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方法可以輕松實(shí)現(xiàn)給圖片加水印。示例如下：

/*html*/
<canvas id="canvas"></canvas>

/*js*/
var img = new Image();   // 創(chuàng)建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";   //設(shè)置水印文字
    ctx.fillText("大前端", 1100, 260)
}

今天暫時寫到這里，歡迎分享關(guān)于canvas的其他應(yīng)用。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。