set background from mobile camera/file

melromero · melromero · commit 90000252f0a7 · 2017-03-23T12:58:18.000+10:00
diff --git a/angular-ui-scribble.js b/angular-ui-scribble.js
@@ -4,12 +4,16 @@ angular.module('angular-ui-scribble',[])
 		scope:{},
 		template:
 		`<div class="scribble">
-			<div class="scribble-canvas">
-					<canvas height="300" width="600"></canvas>
+			<ul class="scribble-actions">
+				<li><button ng-click="clearSignature()">Clear</button></li>
+				<li ng-if='mode!="erase"'><button ng-click="setMode('erase')">Erase</button></li>
+				<li ng-if='mode=="erase"'><button ng-click="setMode('pen')">Pen</button></li>
+				<li><input  id="selectBackground" type="file" accept="image/*" capture="camera"></lis>
+			</ul>
+			<div class="scribble-canvas" height="200" width="350">
+				<canvas height="200" width="380" style="z-index:2;"></canvas>
+				<canvas id="scribble-background" height="200" width="380" style="z-index:1;"></canvas>
 			</div>
-			<button ng-click="clearSignature()">Clear</button>
-			<button ng-click="setMode('erase')">Erase</button>
-			<button ng-click="setMode('pen')">Pen</button>
 		</div>`,
 		controller: function($scope, $element){
 			$scope.mode = 'pen';
@@ -18,6 +22,8 @@ angular.module('angular-ui-scribble',[])
 			var ctx = canvas.getContext('2d');
 			signaturePad = new SignaturePad(canvas);
 
+			$scope.isMobile = true;
+
 			$scope.clearSignature = function(){
 				signaturePad.clear();
 			};
@@ -42,6 +48,37 @@ angular.module('angular-ui-scribble',[])
 					signaturePad.maxWidth = $scope.oldStroke.maxWidth;
 				}
 			});
+
+			// Background {{{
+
+			var selectBackground = document.getElementById('selectBackground');
+			var reader;
+
+			selectBackground.addEventListener('change', function(e){
+				var backgroundSrc = selectBackground.files[0];
+				reader = new FileReader();
+
+				reader.onload = function(event){
+					loadBackground(event.target.result);
+				};
+
+				reader.readAsDataURL(backgroundSrc);
+			});
+
+			function loadBackground(dataUrl){
+				var background = document.getElementById('scribble-background');
+				var backgroundCtx = background.getContext('2d');
+				var image = new Image();
+				var ratio = window.devicePixelRatio || 1;
+				var width = background.width;
+				var height = background.height;
+
+				image.src = dataUrl;
+				image.onload = function () {
+						backgroundCtx.drawImage(image, 0, 0, width, height);
+				};
+			}
+			// }}}
 		}
 	}
 });
diff --git a/demo/index.html b/demo/index.html
@@ -10,9 +10,7 @@
 	<body ng-app="app">
 		<div ng-controller="scribbleExampleCtrl">
 
-			<h2>Scribble 1</h2>
-			<ui-scribble></ui-scribble>
-			<h2>Scribble 2</h2>
+			<h2>Scribble</h2>
 			<ui-scribble></ui-scribble>
 		<script>
 		var app = angular.module("app", [
diff --git a/demo/style.css b/demo/style.css
@@ -1,3 +1,23 @@
+/* Demo css*/
 .scribble-canvas canvas{
 	border: 1px solid #f4f4f4;
 }
+/* Add to package css*/
+.scribble-canvas {
+	position: relative;
+	overflow: auto;
+	height: 100%;
+}
+.scribble-canvas canvas{
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.scribble-actions li{
+	list-style: none;
+	display: inline;
+	width: 100px;
+}
+.scribble-actions button{
+	width: 70px;
+}
