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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
教你如何使用php session
2013/10/28 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python获取当前计算机cpu数量的方法
2015/04/18 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
《最佳路径》教学反思
2014/04/13 职场文书
大型营销活动计划书
2014/04/28 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
迟到检讨书
2015/01/26 职场文书
学术会议邀请函
2015/01/30 职场文书
高中政治教学反思
2016/02/23 职场文书