HTML5在线视频教程canvas下载二维码和图片加水印的方法

2018-04-25 14:04:48 794浏览

canvas下载二维码和图片加水印的方法有不少对HTML5开发感兴趣或者是参加HTML5培训的小伙伴不是很了解，下面小编就带读者们看一下扣丁学堂HTML5在线视频教程讲解的canvas下载二维码和图片加水印的方法，希望能帮到对HTML5开发感兴趣的小伙伴们。

一、下载二维码（查看如何生成二维码）

HTMLCanvasElement提供了toDataURL方法，该方法返回一个包含被类型参数规定图像表现格式的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方法可以轻松实现给图片加水印。示例如下：

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

/*js*/
varimg=newImage();//创建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开发内容的小伙伴可以登录扣丁学堂官网查询。扣丁学堂HTML5在线学习在行业内有着良好的口碑，除了有专业的老师和与时俱进的课程体系之外，还有大量的HTML5基础教程供学员观看学习。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>