Cordova各个插件使用介绍系列(四)—canvas2ImagePlugin保存二维码到手机本地
详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-4-canvas2imageplugin/
在前面几篇文章中简单写了一下,在项目中怎么实现扫描的功能和将信息转化为二维码的功能,现在来介绍一下怎么将生成的二维码保存到手机的本地,这样关于二维码的内容基本上就全面了,好开心~~!
同样的,我还是想说,首先我这个是做基于ionic+ngCordova+Anjularjs的项目,所以,希望大家在看之前已经了解了这三块内容了,不然,可能看起来会有难度的。
一、下载相关的插件的命令:
cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git
二、HTML代码:
<div class="col text-center">
<span>(二维码)</span> <div class="cro">
<div id="Qrcode">
<div class="cro_left_top"></div>
<div class="cro_right_top"></div>
<div class="cro_left_bottom"></div>
<div class="cro_right_bottom"></div>
</div>
<button class="button button-positive"
ng-click="saveImageQrcode()">保存到手机
</button>
</div>
</div>
三、CSS代码,根据UI实现了如下界面的CSS代码:
<style type="text/css">
.cro {
width: 300px;
height: 360px;
position: relative;
text-align: center;
margin: auto;
background: white;
} .cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {
position: absolute;
width: 20px;
height: 20px;
z-index: 1;
background: #212A27;
} .cro_left_top {
top: -1px;
left: -1px;
border-radius: 0px 0px 20px 0px;
} .cro_right_top {
top: -1px;
right: -1px;
border-radius: 0px 0px 0px 20px;
} .cro_left_bottom {
left: -1px;
bottom: -1px;
border-radius: 0px 20px 0px 0px;
} .cro_right_bottom {
right: -1px;
bottom: -1px;
border-radius: 20px 0px 0px 0px;
}
</style>
四、JS代码如下:
var qrcode = new QRCode(document.getElementById("Qrcode"), {
width: 200,
height: 200
});
qrcode.makeCode("123"); var a = document.getElementById("Qrcode");
var canvas = a.children[4];
canvas.id = "myCanvas";
$scope.saveImage = canvas.toDataURL(); //调用保存二维码图片的函数
$scope.saveImageQrcode = function () {
console.log(window.canvas2ImagePlugin);
window.canvas2ImagePlugin.saveImageDataToLibrary(function (msg) {
console.log(msg);
$rootScope.alert('图片已保存');
},
function (err) {
console.log(err);
},
document.getElementById('myCanvas')
)
};
Cordova各个插件使用介绍系列(四)—canvas2ImagePlugin保存二维码到手机本地的更多相关文章
- Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息
详情请看:Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息 在项目中需要获取到当前设备,例如手机的ID,联网状态,等,然后这个Cordova里有这个插件可以用, ...
- qrcode.js插件将你的内容转换成二维码格式
---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...
- thinkphp整合系列之phpqrcode生成二维码
php生成二维码其实挺简单的:当然指的是使用qrcode类库: 因此关于是否要写这篇博客:我是犹豫了再三的: 不过最后还是决定写下吧:如果有童鞋急着用:就可以直接引了: 再个也可以作为即将写的文章微信 ...
- Cordova各个插件使用介绍系列(二)—$cordovaBarcodeScanner扫描二维码与生成二维码
详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是 ...
- Cordova各个插件使用介绍系列(三)—$cordovaImagePicker从手机图库选择多张图片
详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-3-cordovaimagepicker/ 这是能从手 ...
- Cordova各个插件使用介绍系列(一)—$cordovaSms发送短信
详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-1-cordovasms/ 这是调用手机发送短信的插件 ...
- Cordova各个插件使用介绍系列(五)—$cordovaGeolocation获取当前位置
详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-5-cordovageolocation/ $cordov ...
- Cordova各个插件使用介绍系列(七)—$cordovaStatusbar手机状态栏显示
在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...
- Cordova各个插件使用介绍系列(八)—$cordovaCamera筛选手机图库图片并显示
原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...
随机推荐
- 【lucene系列学习四】使用IKAnalyzer分词器实现敏感词和停用词过滤
Lucene自带的中文分词器SmartChineseAnalyzer不太好扩展,于是我用了IKAnalyzer来进行敏感词和停用词的过滤. 首先,下载IKAnalyzer,我下载了 然后,由于IKAn ...
- 深入浅出Node.js(一):什么是Node.js(转贴)
以下内容转自:http://www.infoq.com/cn/articles/what-is-nodejs/ 作者:崔康 [编者按]:Node.js从2009年诞生至今,已经发展了两年有余,其成长的 ...
- 手把手教你学SVN
注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6822713.html ) 作者:wangwen896 整理 对于很多新手来说,SVN 代码托管一无所 ...
- 如何为mysql添加、启动服务
1.点击"开始",输入cmd,以管理员身份运行: 2.进入mysql的bin目录,执行 mysqld --install,然后执行 net start mysql :
- 使用Nginx实现Tomcat集群负载均衡
概述 要解决的问题 环境准备以及问题解决思路 配置 测试 小结 一.概述 使用Nginx主要是来解决高并发情况下的负载均衡问题. 二.要解决的问题 1.最主要是负载均衡请求分发. 2.文件上传功能,只 ...
- Java 多线程详解(三)------线程的同步
Java 多线程详解(一)------概念的引入:http://www.cnblogs.com/ysocean/p/6882988.html Java 多线程详解(二)------如何创建进程和线程: ...
- QA技术概览
• 页面测试 页面测试,顾名思义,用来测试页面的表示和前端功能.这同时涉及单元测试和集成测试.我们会用Mocha 进行页面测试. • 跨页测试 跨页测试是对从一个页面转到另一个页面的功能的测试.比如电 ...
- 用sftp上传文件至linux服务器
1.项目环境 框架:springmvc 项目管理工具:maven 2.必须使用的jar com.jcraft jsch 0.1.27 test 3.新建一个FileUpDown工具类,在类中添加 ...
- Python爬虫01——第一个小爬虫
Python小爬虫——贴吧图片的爬取 在对Python有了一定的基础学习后,进行贴吧图片抓取小程序的编写. 目标: 首先肯定要实现图片抓取这个基本功能 然后实现对用户所给的链接进行抓取 最后要有一定的 ...
- promise知识点汇总
Promise对象被写进ES6的规范当中,提供的是另外一种更加友好的对于异步编程的解决方案,在这之前大多使用的是回调函数和事件来实现异步编程. 怎么来理解Promise对象呢?对于这个ES6新加入的小 ...