查看: 93|回复: 0

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

发表于 2018-6-22 10:58:57

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。


文章转载自:扣丁学堂http://www.codingke.com/


回复

使用道具 举报