Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Test</title>
- <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
- <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
- <script type="text/javascript" src="jic.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div id="holder" style="border:1px solid #000; width:350px; height:300px; margin-top:30px;">
- <div id="holder_helper">
- <h2 id="holder_helper_title">Drag & Drop your Image here!</h2>
- </div>
- <img id="source_image" class="img_container" style="height:300px;"/>
- </div>
- </div>
- </div>
- <script>
- (function(){
- // var holder = $('#holder');
- var holder = document.getElementById('holder');
- holder.ondragover = function() {
- this.className = 'is_hover';
- return false;
- };
- holder.ondragend = function() {
- this.className = '';
- return false;
- };
- holder.ondrop = function(e) {
- this.className = '';
- e.preventDefault();
- document.getElementById("holder_helper").removeChild(document.getElementById("holder_helper_title"));
- var file = e.dataTransfer.files[0],
- reader = new FileReader();
- reader.onload = function(event) {
- var i = document.getElementById("source_image");
- i.src = event.target.result;
- i.onload = function(){
- image_width=$(i).width(),
- image_height=$(i).height();
- if(image_width > image_height){
- i.style.width="320px";
- }else{
- i.style.height="300px";
- }
- i.style.display = "block";
- console.log("Image loaded");
- }
- };
- reader.readAsDataURL(file);
- var uploadedImage = new Image();
- uploadedImage.src = $('#source_image').src;
- var compressed_url = jic.compress(uploadedImage,30,'jpg').src;
- console.log(compressed_url);
- return false;
- }
- })()
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement