JavaScript Clientside Image Shrink

Posted by On 4月 29, 2016 0 Comment

Client Image Shrink

These days, digital camera and mobile camera quality is quite high.
But for web developer, big size file is not pleasant with image upload feature.
We have 2 choices to solve this.
Client shrink, or Serverside shrink.

How to?
Use Canvas.
Create canvas and set image. drawImage has position and size change feature.

Sample

This sample is Show shrink image and get data as javascript Blob

HTML and CSS

<html>
<head>
	<title>Drag and Drop</title>
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="js/index.js"></script>
</head>
<body ng-app="appModule" ng-controller="appController">
<div class="container">
	<div class="row">
      <div class="col-md-6">
        <h3>Image(Drag and Drop)</h3>
      </div>
      <div class="col-md-6">
        <h3>Preview</h3>
      </div>
  </div>
  <div class="row">
  		<div class="col-md-6">
  			<div id="dropimage">
  			</div>
  		</div>
  		<div class="col-md-6">
  			<canvas id="image"></canvas>
  		</div>
	</div>
</div>
</body>
</html>

CSS

#dropimage {
	width: 100%;
	height: 500px;
	border: 1px dashed #f00;
}

JavaScript

var app = angular.module('appModule', []);

app.controller('appController', function($scope){

    $(document).on('dragover', function(event){
        event.stopPropagation();
        event.preventDefault();
    });

    $(document).on('drop', function(event){
        event.stopPropagation();
        event.preventDefault();
    });

    var sendImage = function(blob) {
        var formdata = new FormData();
        formData.append('image', blob);
    };

    $("#dropimage").on('drop', function(event){

        if (event.originalEvent.dataTransfer.files != null) {
            var files = event.originalEvent.dataTransfer.files;
            var file = files[0];
            var image = new Image();

            var reader = new FileReader();
            reader.onload = function(e){
            	dataurl = e.target.result;
            	image.onload = function() {
			var ctx = $("#image")[0].getContext('2d');
            		ctx.clearRect(0, 0, image.width, image.height);
            		console.log("Original w:" + image.width + " h:" + image.height);
            		var w = image.width * 0.5;
                        var h = image.height * 0.5;
            		ctx.canvas.width = w;
            		ctx.canvas.height = h;
            		ctx.drawImage(this, 0, 0, image.width, image.height, 0, 0, w, h);

			var canvasdata = $("#image")[0].toDataURL();
			var base64Data = canvasdata.split(',')[1]
			var data = window.atob(base64Data);
                        var buff = new ArrayBuffer(data.length);
                        var arr = new Uint8Array(buff);

                        for (var i=0; i < data.length; i++) {
                           arr[i] = data.charCodeAt(i);
                        }
                        blob = new Blob([arr], {type: type});
                        console.log(blob.size);
            	}
            	image.src = dataurl;
            };
            reader.readAsDataURL(file);
        }
    });
});

draganddrop

TOPICS