Cordova各个插件使用介绍系列(四)—canvas2ImagePlugin保存二维码到手机本地

发布时间:2020-07-19 07:31:07 作者:zhangxiangj
来源:网络 阅读:1229

详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-4-canvas2p_w_picpathplugin/
在前面几篇文章中简单写了一下,在项目中怎么实现扫描的功能和将信息转化为二维码的功能,现在来介绍一下怎么将生成的二维码保存到手机的本地,这样关于二维码的内容基本上就全面了,好开心~~!

同样的,我还是想说,首先我这个是做基于ionic+ngCordova+Anjularjs的项目,所以,希望大家在看之前已经了解了这三块内容了,不然,可能看起来会有难度的。

一、下载相关的插件的命令:

 

[javascript] view plain copy

  1. cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git  

  

二、HTML代码:

 

[html] view plain copy

  1. <div class="col text-center">  

  2.     <span>(二维码)</span>  

  3.   

  4.     <div class="cro">  

  5.         <div id="Qrcode">  

  6.             <div class="cro_left_top"></div>  

  7.             <div class="cro_right_top"></div>  

  8.             <div class="cro_left_bottom"></div>  

  9.             <div class="cro_right_bottom"></div>  

  10.         </div>  

  11.         <button class="button button-positive"  

  12.                 ng-click="saveImageQrcode()">保存到手机  

  13.         </button>  

  14.     </div>  

  15. </div>  

  

三、CSS代码,根据UI实现了如下界面的CSS代码:

 Cordova各个插件使用介绍系列(四)—canvas2ImagePlugin保存二维码到手机本地

[css] view plain copy

  1. <style type="text/css">  

  2.     .cro {  

  3.         width300px;  

  4.         height360px;  

  5.         positionrelative;  

  6.         text-aligncenter;  

  7.         marginauto;  

  8.         backgroundwhite;  

  9.     }  

  10.   

  11.     .cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {  

  12.         positionabsolute;  

  13.         width20px;  

  14.         height20px;  

  15.         z-index1;  

  16.         background#212A27;  

  17.     }  

  18.   

  19.     .cro_left_top {  

  20.         top: -1px;  

  21.         left: -1px;  

  22.         border-radius: 0px 0px 20px 0px;  

  23.     }  

  24.   

  25.     .cro_right_top {  

  26.         top: -1px;  

  27.         right: -1px;  

  28.         border-radius: 0px 0px 0px 20px;  

  29.     }  

  30.   

  31.     .cro_left_bottom {  

  32.         left: -1px;  

  33.         bottom: -1px;  

  34.         border-radius: 0px 20px 0px 0px;  

  35.     }  

  36.   

  37.     .cro_right_bottom {  

  38.         right: -1px;  

  39.         bottom: -1px;  

  40.         border-radius: 20px 0px 0px 0px;  

  41.     }  

  42. </style>  

 

四、JS代码如下:

[javascript] view plain copy

  1. var qrcode = new QRCode(document.getElementById("Qrcode"), {  

  2.     width: 200,  

  3.     height: 200  

  4. });  

  5. qrcode.makeCode("123");  

  6.   

  7. var a = document.getElementById("Qrcode");  

  8. var canvas = a.children[4];  

  9. canvas.id = "myCanvas";  

  10. $scope.saveImage = canvas.toDataURL();  

  11.   

  12. //调用保存二维码图片的函数  

  13. $scope.saveImageQrcode = function () {  

  14.     console.log(window.canvas2ImagePlugin);  

  15.     window.canvas2ImagePlugin.saveImageDataToLibrary(function (msg) {  

  16.             console.log(msg);  

  17.             $rootScope.alert('图片已保存');  

  18.         },  

  19.         function (err) {  

  20.             console.log(err);  

  21.         },  

  22.         document.getElementById('myCanvas')  

  23.     )  

  24. };  

  


推荐阅读:
  1. Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息
  2. Cordova各个插件使用介绍系列(一)—$cordovaSms发送短信

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

文章 ng cordova

上一篇:NetScaler结合AD限制访问用户-LDAP配置

下一篇:介绍一款优秀的通用管理权限快速开发框架

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》