昨天介绍了一个生成二维码的插件QRCode.js,它是借助HTML5 Canvas绘制而成。所以,今天的主角就是canvas啦–canvas的实际应用。
HTMLCanvasElement提供了toDataURL方法,该方法返回一个包含被类型参数规定图像表现格式的data URI。通过该方法我们就可以生成二维码图片并下载了。示例如下:
/*html*/ <p id=qrcode>p> <a href=javascript:; download=二维码 id=down>下载二维码</a> /*js*/ var canvas = document.getElementsByTagName('canvas')[0]; var downImg = document.getElementById('down') img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')
二、图片加水印
利用canvas的fillText和drawImage方法可以轻松实现给图片加水印。示例如下:
/*html*/ <canvas id=canvas></canvas> /*js*/ var img = new Image(); // 创建img元素 var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d'); img.src = 'myImage.png'; img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; //设置水印文字 ctx.fillText(大前端, 1100, 260) }
原文地址:https://www.jb51.cc/html5/1200191.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。