博客专栏

EEPW首页 > 博客 > 扣丁学堂HTML5培训之canvas下载二维码和图片加水印的方法

扣丁学堂HTML5培训之canvas下载二维码和图片加水印的方法

发布人:扣丁客1 时间:2020-12-29 来源:工程师 发布文章

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

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

一、下载二维码(查看如何生成二维码)

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

*博客内容为网友个人发布,仅代表博主个人观点,如有侵权请联系工作人员删除。



关键词:

相关推荐

技术专区

关闭