canvas 下载二维码和图片加水印的方法


Posted in HTML / CSS onMarch 21, 2018

昨天介绍了一个生成二维码的插件QRCode.js,它是借助HTML5 Canvas绘制而成。所以,今天的主角就是canvas啦–canvas的实际应用。

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

HTMLCanvasElement提供了toDataURL方法,该方法返回一个包含被类型参数规定图像表现格式的data URI。通过该方法我们就可以生成二维码图片并下载了。示例如下:

/*html*/
<div id="qrcode">div>
<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)
}

今天暂时写到这里,欢迎分享关于canvas的其他应用。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 #HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 #HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 #HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 #HTML / CSS
HTML5 新表单类型示例代码
Mar 20 #HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 #HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 #HTML / CSS
You might like
PHP PDO函数库详解
2010/04/27 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解Node 定时器
2018/02/26 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python 修改列表中的元素方法
2018/06/26 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python实现图片转字符画
2021/02/19 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
Linux如何压缩可执行文件
2014/03/27 面试题
企划专员岗位职责
2013/12/09 职场文书
机关搬迁方案
2014/05/18 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
详解Go语言中Get/Post请求测试
2022/06/01 Golang