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