daily pastebin goal
54%
SHARE
TWEET

Untitled

a guest Dec 15th, 2017 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Cloud Vision API Sample App</title>
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  8. <script>
  9. $(function() {
  10.     $("#fileField").change(function() {
  11.         readFile(this);
  12.     });
  13.     $('#fileForm').on('submit', upload);
  14. });
  15.  
  16. function readFile(input) {
  17.     if (input.files && input.files[0]) {
  18.         var file = input.files[0];
  19.         var reader = new FileReader();
  20.         reader.onload = function(event) {
  21.             $('#test_image').attr('src', event.target.result);
  22.         }
  23.         reader.readAsDataURL(file);
  24.     }
  25. }
  26.  
  27. function upload(event) {
  28.     event.preventDefault();
  29.     var file = $("#fileField")[0].files[0];
  30.     var reader = new FileReader();
  31.     reader.onloadend = uploadToCloudVision;
  32.     reader.readAsDataURL(file);
  33. }
  34.  
  35. function uploadToCloudVision(event) {
  36.     var content = event.target.result;
  37.     var data = {
  38.         requests: [{
  39.             image: {
  40.                 content: content.replace('data:image/jpeg;base64,', '')
  41.             },
  42.             features: [{
  43.                 type: "LANDMARK_DETECTION"
  44.             }]
  45.         }]
  46.     };
  47.  
  48.     $('#results').text('Loading');
  49.     $.post({
  50.         url: 'https://vision.googleapis.com/v1/images:annotate?key=xxx',
  51.         data: JSON.stringify(data),
  52.         contentType: 'application/json'
  53.     }).fail(function(jqXHR, textStatus, errorThrown) {
  54.         $('#results').text('ERRORS: ' + textStatus + ' ' + errorThrown);
  55.     }).done(display);
  56. }
  57.  
  58. function display(data) {
  59.     if (jQuery.isEmptyObject(data.responses[0])) {
  60.         $('#results').text("Location Not Found.");
  61.     } else {
  62.                     initMap(Object.values(data.responses[0].landmarkAnnotations[0].locations[0].latLng));
  63.         var contents = JSON.stringify(data, null, 4);
  64.         $('#results').text(contents);
  65.     }
  66. }
  67.  
  68. function initMap(latLng) {
  69.     var latLng = { lat: latLng[0], lng: latLng[1] };
  70.     var map = new google.maps.Map(document.getElementById('map'), {
  71.         zoom: 15,
  72.         center: latLng
  73.     });
  74.     var marker = new google.maps.Marker({
  75.         position: latLng,
  76.         map: map
  77.     });
  78. }
  79. </script>
  80. <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxx"></script>
  81. </head>
  82.  
  83. <body>
  84. <h1>Cloud Vision API Sample App</h1>
  85. <div style="display: flex;">
  86.     <img id="test_image">
  87.     <div id="map" style="height:500%; width:100%;"></div>
  88. </div>
  89. <form id="fileForm" action="#">
  90.     <input type="file" id="fileField">
  91.     <br>
  92.     <input type="submit" value="Submit">
  93. </form>
  94. <code style="white-space:pre" id="results"></code>
  95. </body>
  96.  
  97. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top