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

详情链接地址：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代码：

[css] view plain copy

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

2.     .cro {  

3.         width: 300px;  

4.         height: 360px;  

5.         position: relative;  

6.         text-align: center;  

7.         margin: auto;  

8.         background: white;  

9.     }  

10.   

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

12.         position: absolute;  

13.         width: 20px;  

14.         height: 20px;  

15.         z-index: 1;  

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. };