这些小活动你都参加了吗?快来围观一下吧!>>
电子产品世界 » 论坛首页 » 综合技术 » 基础知识 » HTML5在线视频教程canvas下载二维码和图片加水印的方法

共3条 1/1 1 跳转至

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

菜鸟
2020-12-29 17:42:07     打赏

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



工程师
2020-12-29 22:29:27     打赏
2楼

方法可以的


工程师
2020-12-29 22:39:32     打赏
3楼

方法总结的还是不错的


共3条 1/1 1 跳转至

回复

匿名不能发帖!请先 [ 登陆 注册 ]