canvas 下载二维码和图片加水印的方法

昨天我们介绍了一款名为QRCode.js的生成二维码的插件，它巧妙利用HTML5的Canvas功能进行绘制。今天，就让我们深入canvas这一强大工具的更多实际应用。

让我们关注如何使用canvas实现二维码的下载。HTMLCanvasElement中的toDataURL方法是一个强大的功能，它能返回一个包含图像表现格式的data URI。正是借助这个方法，我们可以轻松生成二维码图片并下载。

在HTML中，我们只需要创建一个div元素和一个用于下载的a元素：

```html

下载二维码

```

而在JavaScript中，我们可以通过以下代码实现下载功能：

```javascript

var canvas = document.getElementsByTagName('canvas')[0];

var downImg = document.getElementById('down');

downImg.href = canvas.toDataURL('image/png');

```

我们还可以通过canvas给图片添加水印。利用fillText和drawImage方法，我们可以轻松实现这一功能。

在HTML中，我们需要一个canvas元素：

```html

```

在JavaScript中，我们可以按照以下步骤给图片添加水印：

```javascript

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的用途远不止于此，欢迎大家分享更多关于canvas的应用实例。希望这些示例能对大家的学习有所帮助，也希望大家多多支持我们的博客——狼蚁SEO。

通过调用cambrian.render('body')来渲染或展示这些内容，让我们共同和学习前端技术的无尽魅力。