morenoh149/crop-image.html

## crop-image.html
<ion-view>
  <ion-header-bar align-title="center" class="bar-dark">
    <div class="buttons">
      <button class="button button-icon icon ion-close" ng-click="goHome()"></button>
    </div>
    <h1 class="title">crop</h1>
  </ion-header-bar>
  <!--
  <div class="header-padding"></div>
  -->
  <ion-content>
    <!--
    <div></div>
    <img src="{{ imageURI }}" id="imageToCrop"/>
    -->

    <canvas id="source"></canvas>
  </ion-content>
  <script>
    'use strict';

    window.$('document').ready( function() {
      var canvasSource = document.getElementById('source');
      var ctxSource = canvasSource.getContext('2d');

      var img = new Image();
      img.src = "images/tina.png";
      img.onload = function() {
        ctxSource.drawImage(img, 0, 0);
      };
    });
  </script>
</ion-view>

## crop.js
'use strict';

window.$('document').ready( function() {
  var canvasSource = document.getElementById('source');
  var ctxSource = canvasSource.getContext('2d');

  var img = new Image();
  img.src = "images/tina.png";
  img.onload = function() {
    ctxSource.drawImage(img, 0, 0);
  };
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>"Txtbinge"</title>

    <!-- build:css styles/vendor.css -->
    <!-- <link rel="stylesheet" href="vendor/some.contrib.css"> -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/ionic/css/ionic.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="bower_components/jcrop/css/jquery.Jcrop.css">
    <!-- endbuild -->
  </head>

  <body ng-app="Txtbinge">

    <!--
    <div ui-view></div>
    -->
    <ion-nav-view></ion-nav-view>

    <!-- build:js scripts/vendor.js -->
    <!-- <script src="vendor/someContribJs.js"></script> -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/ionic/js/ionic.js"></script>
    <script src="bower_components/ionic/js/ionic-angular.js"></script>
    <script src="bower_components/firebase/firebase.js"></script>
    <script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
    <script src="bower_components/angularfire/angularfire.js"></script>
    <script src="bower_components/pixastic/pixastic.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/content-controller.js"></script>
    <script src="scripts/camera-service.js"></script>
    <script src="scripts/utilities.js"></script>
    <script src="bower_components/jcrop/js/jquery.Jcrop.js"></script>
    <script src="scripts/crop.js"></script>
    <!-- endbuild -->

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

  </body>
</html>
	<ion-view>
	<ion-header-bar align-title="center" class="bar-dark">
	<div class="buttons">
	<button class="button button-icon icon ion-close" ng-click="goHome()"></button>
	</div>
	<h1 class="title">crop</h1>
	</ion-header-bar>
	<!--
	<div class="header-padding"></div>
	-->
	<ion-content>
	<!--
	<div></div>
	<img src="{{ imageURI }}" id="imageToCrop"/>
	-->

	<canvas id="source"></canvas>
	</ion-content>
	<script>
	'use strict';

	window.$('document').ready( function() {
	var canvasSource = document.getElementById('source');
	var ctxSource = canvasSource.getContext('2d');

	var img = new Image();
	img.src = "images/tina.png";
	img.onload = function() {
	ctxSource.drawImage(img, 0, 0);
	};
	});
	</script>
	</ion-view>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title>"Txtbinge"</title>

	<!-- build:css styles/vendor.css -->
	<!-- <link rel="stylesheet" href="vendor/some.contrib.css"> -->
	<!-- bower:css -->
	<link rel="stylesheet" href="bower_components/ionic/css/ionic.css" />
	<!-- endbower -->
	<!-- endbuild -->

	<!-- build:css({.tmp,app}) styles/main.css -->
	<link rel="stylesheet" href="styles/main.css">
	<link rel="stylesheet" href="bower_components/jcrop/css/jquery.Jcrop.css">
	<!-- endbuild -->
	</head>

	<body ng-app="Txtbinge">

	<!--
	<div ui-view></div>
	-->
	<ion-nav-view></ion-nav-view>

	<!-- build:js scripts/vendor.js -->
	<!-- <script src="vendor/someContribJs.js"></script> -->
	<!-- bower:js -->
	<script src="bower_components/jquery/dist/jquery.js"></script>
	<script src="bower_components/angular/angular.js"></script>
	<script src="bower_components/angular-animate/angular-animate.js"></script>
	<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
	<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
	<script src="bower_components/ionic/js/ionic.js"></script>
	<script src="bower_components/ionic/js/ionic-angular.js"></script>
	<script src="bower_components/firebase/firebase.js"></script>
	<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
	<script src="bower_components/angularfire/angularfire.js"></script>
	<script src="bower_components/pixastic/pixastic.js"></script>
	<!-- endbower -->
	<!-- endbuild -->

	<!-- build:js({.tmp,app}) scripts/scripts.js -->
	<script src="scripts/app.js"></script>
	<script src="scripts/content-controller.js"></script>
	<script src="scripts/camera-service.js"></script>
	<script src="scripts/utilities.js"></script>
	<script src="bower_components/jcrop/js/jquery.Jcrop.js"></script>
	<script src="scripts/crop.js"></script>
	<!-- endbuild -->

	<!-- cordova script (this will be a 404 during development) -->
	<script src="cordova.js"></script>

	</body>
	</html>