www.webdeveloper.com
Results 1 to 3 of 3

Thread: image resize and preview on selecting the image file without uploading

  1. #1
    Join Date
    Nov 2013
    Posts
    2

    Unhappy image resize and preview on selecting the image file without uploading

    hi, as the title says, i want to resize and preview image before i submit it to my server. it is because of reducing load to my server and also give the client ability to crop the image too.

    i am using imgareaselect for cropping. and also using a javascript to preview the image. until now this works well.

    i wanted to resize the image before crop and upload, so i search a bit and found that i can use canvas for resizing while maintaining the ratio.

    but after updated my code this does not works. i am new to javascript. i need your help.
    my script

    Code:
    <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
    <script type="text/javascript">
    
    function previewImage(input) {
    
        var preview = document.getElementById('preview');
    	var preview_crop_thumb = document.getElementById('preview_crop_thumb');
    	
        if (input.files && input.files[0]) {
    	
    	  var img = document.createElement("img");
          var reader = new FileReader();
    	  
          reader.onload = function (e) {
    	  img.src = e.target.result
          }
    	  
          reader.readAsDataURL(input.files[0]);
    	  var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);
    
          var MAX_WIDTH = 550;
          var MAX_HEIGHT = 550;
          var width = img.width;
    	  var height = img.height;
    	  
    	  if (width > height) {
          if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
        } else {
          if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
        }
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, width, height);
    	  var dataurl = canvas.toDataURL("image/jpg");
    	  
    	  window.onload=function(){
    		  
    	  document.getElementById('preview').style.display='block';
          document.getElementById('preview_crop').style.display='block';
    	  document.getElementById('image_crop_diolouge').style.display='block';
          preview.setAttribute('src', dataurl);
    	  preview_crop_thumb.setAttribute('src', dataurl);  
    	}
    	  
    	  
        } else {
    	
    	  document.getElementById('preview').style.display='none';
    	  document.getElementById('preview_crop').style.display='none';
    	  document.getElementById('image_crop_diolouge').style.display='none';
          preview.setAttribute('src', 'placeholder.png');
    	  preview_crop_thumb.setAttribute('src', 'placeholder.png');
    	  
        }
      }
    
    </script>
    <style>
    .image_crop_diolouge{
        font-family: calibri;
    	color:#7A7A7A;
    	text-shadow:0px 1px 1px #BDBDBD;
    	font-weight:bold;
        margin:10px; 
        background:#FFE974; 
    	border:1px solid #FFB28E; 
    	box-shadow:1px 1px 2px #666; 
    	border-radius:1px; 
    	max-width:800px;
    	padding:10px; 
    	}
    #preview_crop{
        width: 200px; 
    	height: 200px; 
    	overflow: hidden; 
    	float:right; 
    	display:none; 
    	margin:10px 20px 10px 0px; 
        }
    #preview{
        width:550px; 
    	height:550px; 
    	display:none; 
    	float:left;
    	margin:10px 10px 10px 20px; 
        }	
    
    </style>
    <center>
    <div style="max-width:800px; ">
    <div class="image_crop_diolouge" id="image_crop_diolouge" style="display:none;">Press the left mouse button and drag to crop the image</div>
    <img id="preview" src="placeholder.png"/>
    <div id="preview_crop" >
    <img id="preview_crop_thumb" src="placeholder.png" style="width: 200px;">
    </div>
    <div class="image_crop_diolouge">
    <input type="file" name="image" onchange="previewImage(this)" accept="image/*"/>
    </div>
    <br/><br/>
    </div>
    </center>

  2. #2
    Join Date
    Nov 2013
    Posts
    2
    hello??? anyone

  3. #3
    Join Date
    Apr 2013
    Posts
    31
    Hi, avik244.
    Have you ever found your way out? Why not try some
    image resizers which allows users to preview during the resize process? You can google it and select one to have a try. I hope you success. Good luck.



    Best regards,
    Arron

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles