object-detection/index.html at master · nikcomestotalk/object-detection · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<title>client side image resize before upload jquery</title>
<script type="text/javascript">
var fileReader = new FileReader();
var filterType = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

fileReader.onload = function (event) {
  var image = new Image();

  image.onload=function(){
      document.getElementById("original-Img").src=image.src;
      var canvas=document.createElement("canvas");
      var context=canvas.getContext("2d");
      canvas.width=image.width/4;
      canvas.width=112;
      canvas.height=image.height/4;
      canvas.height=112;
      context.drawImage(image,
          0,
          0,
          image.width,
          image.height,
          0,
          0,
          canvas.width,
          canvas.height
      );
      var url = "";

      document.getElementById("upload-Preview").src="https://codetea.com/content/images/2017/09/Two-Cube-Loader.gif";
      //document.getElementById("upload-Preview").src = canvas.toDataURL();
url = "URL HERE";
      jQuery.ajax({
    url: url,
    type: "POST",
    cache: false,
    contentType: "application/json",
    processData: true,
    data: canvas.toDataURL()
})
.done(function(e) {
	document.getElementById("upload-Preview").src = canvas.toDataURL();
	alert("This is the " + e.verdict + " :-)");
    // It is done.
})
.fail((e) => {
	alert('Error');
    // Report that there is a problem!
});
  }
  image.src=event.target.result;
};

var loadImageFile = function () {
  var uploadImage = document.getElementById("upload-Image");

  //check and retuns the length of uploded file.
  if (uploadImage.files.length === 0) {
    return;
  }

  //Is Used for validate a valid file.
  var uploadFile = document.getElementById("upload-Image").files[0];
  if (!filterType.test(uploadFile.type)) {
    alert("Please select a valid image.");
    return;
  }

  fileReader.readAsDataURL(uploadFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td>Select any Car/Motorcycle/Mobile/Furniture/Books Image - <input id="upload-Image" type="file" onchange="loadImageFile();" /></td>
        </tr>
        <tr>
          <td>Origal Img - <img id="original-Img" style="display: none"/></td>
        </tr>
         <tr>
          <td>Compress Img - <img id="upload-Preview" style="width:200px" /></td>
        </tr>

      </tbody>
    </table>
  </form>
</body>
</html>