diff --git a/bower.json b/bower.json index ef00f8bc7..80e3c20d3 100644 --- a/bower.json +++ b/bower.json @@ -15,7 +15,8 @@ "mocha": "~1.18.2", "chai": "~1.9.1", "crypto-js": "http://crypto-js.googlecode.com/files/CryptoJS%20v3.1.2.zip", - "sjcl":"1.0.0", - "file-saver": "*" + "sjcl": "1.0.0", + "file-saver": "*", + "qrcode-decoder-js": "*" } } diff --git a/css/main.css b/css/main.css index 779713c4f..e53b36b58 100644 --- a/css/main.css +++ b/css/main.css @@ -25,6 +25,7 @@ html, body {height: 100%;} padding: 5px 2rem; bottom: 0; width: 100%; + z-index: 100; } .bottom-copay { @@ -427,3 +428,8 @@ a.loading { background: #fff; } +#qr-canvas { display: none; } +#qrcode-scanner-video { + display: block; + margin: 0 auto; +} diff --git a/index.html b/index.html index a675ee395..c04e4c846 100644 --- a/index.html +++ b/index.html @@ -462,13 +462,40 @@
- - +
+ +
+ +
+
+ +
+
+ Cancel +
+
+
+
+ +
+
+ + + Get QR code + + +
+
+
+ +
+
+
@@ -556,6 +583,8 @@ + + diff --git a/js/controllers/send.js b/js/controllers/send.js index bdad886a8..7658f3dad 100644 --- a/js/controllers/send.js +++ b/js/controllers/send.js @@ -1,10 +1,42 @@ 'use strict'; angular.module('copay.send').controller('SendController', - function($scope, $rootScope, $location) { + function($scope, $rootScope, $window, $location, $timeout) { $scope.title = 'Send'; $scope.loading = false; + // Detect mobile devices + var isMobile = { + Android: function() { + return navigator.userAgent.match(/Android/i); + }, + BlackBerry: function() { + return navigator.userAgent.match(/BlackBerry/i); + }, + iOS: function() { + return navigator.userAgent.match(/iPhone|iPad|iPod/i); + }, + Opera: function() { + return navigator.userAgent.match(/Opera Mini/i); + }, + Windows: function() { + return navigator.userAgent.match(/IEMobile/i); + }, + any: function() { + return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); + } + }; + + // Detect protocol + $scope.isHttp = function() { + var protocol = $window.location.protocol; + return (protocol.indexOf('http') === 0); + }; + + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; + window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; + + $scope.isMobile = isMobile.any(); $scope.unitIds = ['BTC','mBTC']; $scope.selectedUnit = $scope.unitIds[0]; @@ -32,6 +64,119 @@ angular.module('copay.send').controller('SendController', $scope.amount = null; form.address.$pristine = true; form.amount.$pristine = true; + }; + // QR code Scanner + var cameraInput; + var video; + var canvas; + var $video; + var context; + var localMediaStream; + + var _scan = function(evt) { + if ($scope.isMobile) { + $scope.scannerLoading = true; + var files = evt.target.files; + + if (files.length === 1 && files[0].type.indexOf('image/') === 0) { + var file = files[0]; + + var reader = new FileReader(); + reader.onload = (function(theFile) { + return function(e) { + var mpImg = new MegaPixImage(file); + mpImg.render(canvas, { maxWidth: 200, maxHeight: 200, orientation: 6 }); + + $timeout(function() { + qrcode.width = canvas.width; + qrcode.height = canvas.height; + qrcode.imagedata = context.getImageData(0, 0, qrcode.width, qrcode.height); + + try { + //alert(JSON.stringify(qrcode.process(context))); + qrcode.decode(); + } catch (e) { + alert(e); + } + }, 1500); + }; + })(file); + + // Read in the file as a data URL + reader.readAsDataURL(file); + } + } else { + if (localMediaStream) { + context.drawImage(video, 0, 0, 300, 225); + + try { + qrcode.decode(); + } catch(e) { + //qrcodeError(e); + } + } + + $timeout(_scan, 500); + } + }; + + var _successCallback = function(stream) { + video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; + localMediaStream = stream; + video.play(); + $timeout(_scan, 1000); + }; + + var _scanStop = function() { + $scope.scannerLoading = false; + $scope.showScanner = false; + if (!$scope.isMobile) { + if (localMediaStream && localMediaStream.stop) localMediaStream.stop(); + localMediaStream = null; + video.src = ''; + } + }; + + var _videoError = function(err) { + console.log('Video Error: ' + JSON.stringify(err)); + _scanStop(); + }; + + qrcode.callback = function(data) { + _scanStop(); + + var str = (data.indexOf('bitcoin:') === 0) ? data.substring(8) : data; + console.log('QR code detected: ' + str); + $scope.$apply(function() { + $scope.address = str; + }); + }; + + $scope.cancelScanner = function() { + _scanStop(); + }; + + $scope.openScanner = function() { + $scope.showScanner = true; + + // Wait a moment until the canvas shows + $timeout(function() { + canvas = document.getElementById('qr-canvas'); + context = canvas.getContext('2d'); + + if ($scope.isMobile) { + cameraInput = document.getElementById('qrcode-camera'); + cameraInput.addEventListener('change', _scan, false); + } else { + video = document.getElementById('qrcode-scanner-video'); + $video = angular.element(video); + canvas.width = 300; + canvas.height = 225; + context.clearRect(0, 0, 300, 225); + + navigator.getUserMedia({video: true}, _successCallback, _videoError); + } + }, 500); }; }); diff --git a/lib/ios-imagefile-megapixel/megapix-image.js b/lib/ios-imagefile-megapixel/megapix-image.js new file mode 100644 index 000000000..3f130cf65 --- /dev/null +++ b/lib/ios-imagefile-megapixel/megapix-image.js @@ -0,0 +1,253 @@ +/** + * Mega pixel image rendering library for iOS6 Safari + * + * Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel), + * which causes unexpected subsampling when drawing it in canvas. + * By using this library, you can safely render the image with proper stretching. + * + * Copyright (c) 2012 Shinichi Tomita + * Released under the MIT license + */ +(function() { + + /** + * Detect subsampling in loaded image. + * In iOS, larger images than 2M pixels may be subsampled in rendering. + */ + function detectSubsampling(img) { + var iw = img.naturalWidth, ih = img.naturalHeight; + if (iw * ih > 1024 * 1024) { // subsampling may happen over megapixel image + var canvas = document.createElement('canvas'); + canvas.width = canvas.height = 1; + var ctx = canvas.getContext('2d'); + ctx.drawImage(img, -iw + 1, 0); + // subsampled image becomes half smaller in rendering size. + // check alpha channel value to confirm image is covering edge pixel or not. + // if alpha value is 0 image is not covering, hence subsampled. + return ctx.getImageData(0, 0, 1, 1).data[3] === 0; + } else { + return false; + } + } + + /** + * Detecting vertical squash in loaded image. + * Fixes a bug which squash image vertically while drawing into canvas for some images. + */ + function detectVerticalSquash(img, iw, ih) { + var canvas = document.createElement('canvas'); + canvas.width = 1; + canvas.height = ih; + var ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + var data = ctx.getImageData(0, 0, 1, ih).data; + // search image edge pixel position in case it is squashed vertically. + var sy = 0; + var ey = ih; + var py = ih; + while (py > sy) { + var alpha = data[(py - 1) * 4 + 3]; + if (alpha === 0) { + ey = py; + } else { + sy = py; + } + py = (ey + sy) >> 1; + } + var ratio = (py / ih); + return (ratio===0)?1:ratio; + } + + /** + * Rendering image element (with resizing) and get its data URL + */ + function renderImageToDataURL(img, options, doSquash) { + var canvas = document.createElement('canvas'); + renderImageToCanvas(img, canvas, options, doSquash); + return canvas.toDataURL("image/jpeg", options.quality || 0.8); + } + + /** + * Rendering image element (with resizing) into the canvas element + */ + function renderImageToCanvas(img, canvas, options, doSquash) { + var iw = img.naturalWidth, ih = img.naturalHeight; + var width = options.width, height = options.height; + var ctx = canvas.getContext('2d'); + ctx.save(); + transformCoordinate(canvas, ctx, width, height, options.orientation); + var subsampled = detectSubsampling(img); + if (subsampled) { + iw /= 2; + ih /= 2; + } + var d = 1024; // size of tiling canvas + var tmpCanvas = document.createElement('canvas'); + tmpCanvas.width = tmpCanvas.height = d; + var tmpCtx = tmpCanvas.getContext('2d'); + var vertSquashRatio = doSquash ? detectVerticalSquash(img, iw, ih) : 1; + var dw = Math.ceil(d * width / iw); + var dh = Math.ceil(d * height / ih / vertSquashRatio); + var sy = 0; + var dy = 0; + while (sy < ih) { + var sx = 0; + var dx = 0; + while (sx < iw) { + tmpCtx.clearRect(0, 0, d, d); + tmpCtx.drawImage(img, -sx, -sy); + ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh); + sx += d; + dx += dw; + } + sy += d; + dy += dh; + } + ctx.restore(); + tmpCanvas = tmpCtx = null; + } + + /** + * Transform canvas coordination according to specified frame size and orientation + * Orientation value is from EXIF tag + */ + function transformCoordinate(canvas, ctx, width, height, orientation) { + switch (orientation) { + case 5: + case 6: + case 7: + case 8: + canvas.width = height; + canvas.height = width; + break; + default: + canvas.width = width; + canvas.height = height; + } + switch (orientation) { + case 2: + // horizontal flip + ctx.translate(width, 0); + ctx.scale(-1, 1); + break; + case 3: + // 180 rotate left + ctx.translate(width, height); + ctx.rotate(Math.PI); + break; + case 4: + // vertical flip + ctx.translate(0, height); + ctx.scale(1, -1); + break; + case 5: + // vertical flip + 90 rotate right + ctx.rotate(0.5 * Math.PI); + ctx.scale(1, -1); + break; + case 6: + // 90 rotate right + ctx.rotate(0.5 * Math.PI); + ctx.translate(0, -height); + break; + case 7: + // horizontal flip + 90 rotate right + ctx.rotate(0.5 * Math.PI); + ctx.translate(width, -height); + ctx.scale(-1, 1); + break; + case 8: + // 90 rotate left + ctx.rotate(-0.5 * Math.PI); + ctx.translate(-width, 0); + break; + default: + break; + } + } + + + /** + * MegaPixImage class + */ + function MegaPixImage(srcImage) { + if (window.Blob && srcImage instanceof Blob) { + var img = new Image(); + var URL = window.URL && window.URL.createObjectURL ? window.URL : + window.webkitURL && window.webkitURL.createObjectURL ? window.webkitURL : + null; + if (!URL) { throw Error("No createObjectURL function found to create blob url"); } + img.src = URL.createObjectURL(srcImage); + this.blob = srcImage; + srcImage = img; + } + if (!srcImage.naturalWidth && !srcImage.naturalHeight) { + var _this = this; + srcImage.onload = function() { + var listeners = _this.imageLoadListeners; + if (listeners) { + _this.imageLoadListeners = null; + for (var i=0, len=listeners.length; i maxWidth) { + width = maxWidth; + height = (imgHeight * width / imgWidth) << 0; + } + if (maxHeight && height > maxHeight) { + height = maxHeight; + width = (imgWidth * height / imgHeight) << 0; + } + var opt = { width : width, height : height }; + for (var k in options) opt[k] = options[k]; + + var tagName = target.tagName.toLowerCase(); + if (tagName === 'img') { + target.src = renderImageToDataURL(this.srcImage, opt, doSquash); + } else if (tagName === 'canvas') { + renderImageToCanvas(this.srcImage, target, opt, doSquash); + } + if (typeof this.onrender === 'function') { + this.onrender(target); + } + }; + + /** + * Export class to global + */ + if (typeof define === 'function' && define.amd) { + define([], function() { return MegaPixImage; }); // for AMD loader + } else { + this.MegaPixImage = MegaPixImage; + } + +})();