詳情連接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-4-canvas2imageplugin/
在前面幾篇文章中簡單寫了一下,在項目中怎麼實現掃描的功能和將信息轉化爲二維碼的功能,如今來介紹一下怎麼將生成的二維碼保存到手機的本地,這樣關於二維碼的內容基本上就全面了,好開心~~!javascript
一樣的,我仍是想說,首先我這個是作基於ionic+ngCordova+Anjularjs的項目,因此,但願你們在看以前已經瞭解了這三塊內容了,否則,可能看起來會有難度的。css
1、下載相關的插件的命令:html
cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git
2、HTML代碼:java
<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>
3、CSS代碼,根據UI實現了以下界面的CSS代碼:git
<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>
4、JS代碼以下:github
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') ) };