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技术交流群：692172929。微信号：codingbb

专栏文章内容及配图由作者撰写发布，仅供工程师学习之用，如有侵权或者其他违规问题，请联系本站处理。 联系我们