Guest User

Untitled

a guest
Dec 22nd, 2012
65
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div data-role="page">
  2. <div data-role="header" data-position="fixed">
  3. <h1>Capture image</h1>
  4. </div>
  5. <div data-role="content">
  6. <a data-role="button" id="capture">Capture image</a>
  7. <a data-role="button" id="getImg">Get from library</a>
  8. <div id="image_container" style="display:none;">
  9. <img style="display:none;width:260px;height:260px;" id="image" src="" />
  10. <p>Crop Controls</p>
  11. <div data-role="fieldcontain">
  12. <label for="x">X: </label><input type="text" name="x">
  13. </div>
  14. <div data-role="fieldcontain">
  15. <label for="y">Y: </label><input type="text" name="y">
  16. </div>
  17. <div data-role="fieldcontain">
  18. <label for="width">Width: </label><input type="text" name="width">
  19. </div>
  20. <div data-role="fieldcontain">
  21. <label for="height">Height: </label><input type="text" name="height">
  22. </div>
  23. <a data-role="button" id="crop">Crop</a>
  24. <canvas id="myCanvas" width="260" height="260">
  25. </canvas>
  26. </div>
  27. </div>
  28. <div data-role="footer" data-position="fixed">
  29. <h1>Footer</h1>
  30. </div>
  31. </div>
  32.  
  33. // Wait for PhoneGap to connect with the device
  34. document.addEventListener("deviceready",onDeviceReady,false);
  35.  
  36. var pictureSource; // picture source
  37. var destinationType; // sets the format of returned value
  38.  
  39. // PhoneGap is ready to be used!
  40. function capture(){
  41. //alert('hell');
  42. //capturePhoto();
  43. navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50});
  44. }
  45. function onDeviceReady() {
  46. var capture_btn = $('#capture');
  47. var getImg_btn = $('#getImg');
  48. var captureVideo_btn = $('#captureVideo');
  49.  
  50. pictureSource=navigator.camera.PictureSourceType;
  51. destinationType=navigator.camera.DestinationType;
  52.  
  53. capture_btn.click(function(){
  54. //capturePhoto();
  55. alert("hell");
  56. });
  57.  
  58. getImg_btn.click(function(){
  59. getImage(pictureSource.SAVEDPHOTOALBUM);
  60. });
  61. var getX = $('input[name=x]');
  62. var getY = $('input[name=y]');
  63. var getWidth = $('input[name=width]');
  64. var getHeight = $('input[name=height]');
  65.  
  66. getX.change(function() {
  67. console.log("X:" + getX.val());
  68. });
  69.  
  70. getY.change(function() {
  71. console.log("Y:" + getY.val());
  72. });
  73.  
  74. getWidth.change(function() {
  75. console.log("Width:" + getWidth.val());
  76. });
  77.  
  78. getHeight.change(function() {
  79. console.log("Height:" + getHeight.val());
  80. });
  81.  
  82. var canvas = document.getElementById("myCanvas");
  83. var context = canvas.getContext("2d");
  84.  
  85. var cropBtn = $('#crop');
  86. cropBtn.click(function(){
  87. var imageSrc = $("#image").attr('src');
  88. crop(getX, getY, getWidth, getHeight, imageSrc);
  89. });
  90.  
  91. // Cropped Image
  92. function crop(getX, getY, getWidth, getHeight, imageSrc){
  93. var imageObj = new Image();
  94.  
  95. imageObj.onload = function(){
  96.  
  97. var sourceX = getX.val();
  98. var sourceY = getY.val();
  99. var sourceWidth = getWidth.val();
  100. var sourceHeight = getHeight.val();
  101. var destWidth = sourceWidth;
  102. var destHeight = sourceHeight;
  103. var destX = 0;
  104. var destY = canvas.height / 2;
  105.  
  106. context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight,
  107. destX, destY, destWidth, destHeight);
  108. };
  109. imageObj.src = imageSrc;
  110. }
  111.  
  112. }
  113.  
  114. // Called when a photo is successfully retrieved
  115. function onPhotoDataSuccess(imageData) {
  116. // Uncomment to view the base64 encoded image data
  117. console.log(imageData);
  118. }
  119.  
  120. // Called when a photo is successfully retrieved
  121. function onPhotoURISuccess(imageURI) {
  122. // Uncomment to view the image file URI
  123. // console.log(imageURI);
  124.  
  125. // Get image handle
  126. var image = document.getElementById('image');
  127. var imgCnt = document.getElementById('image_container');
  128.  
  129. // Unhide image container
  130. imgCnt.style.display = 'block';
  131.  
  132. // Unhide image elements
  133. image.style.display = 'block';
  134.  
  135. // Show the captured photo
  136. // The inline CSS rules are used to resize the image
  137. image.src = imageURI;
  138. }
  139.  
  140. // A button will call this function
  141. function capturePhoto () {
  142. // Take picture using device camera and retrieve image as base64-encoded string
  143. navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
  144. }
  145.  
  146. // A button will call this function
  147. function getImage(source) {
  148. // Retrieve image file location from specified source
  149. navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
  150. destinationType: destinationType.FILE_URI,
  151. sourceType: source });
  152. }
  153.  
  154. // Called if something bad happens.
  155. function onFail(message) {
  156. alert('Failed because: ' + message);
  157. }
  158.  
  159. // Called when capture operation is finished
  160. function captureSuccess(mediaFiles) {
  161.  
  162. }
  163.  
  164. // Called if something bad happens.
  165. function captureError(error) {
  166. var msg = 'An error occurred during capture: ' + error.code;
  167. navigator.notification.alert(msg, null, 'Uh oh!');
  168. }
RAW Paste Data