3 min
Image resize and uploader in javascript

h1. image resize and uploader in javascript 

july 1 2015

<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name=viewport   content="width=device-width, initial-scale=1">
    	<title>Resize an Image Using Canvas, Drag and Drop and the File API Example</title>
	<meta name="description" content="Use the File API, drag and drop, and HTML5 canvas to allow for JavaScript resizing of images." />


<!--[if IE]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script><![endif]-->

<style type="text/css">
#saveimagetext {
    color: #fff;
    font-weight: bold;
}

		#preview-row {
			position: relative;
			width: auto;
			padding: 12px;
			border: 1px solid #ccc;
                        display: none;
		}
		#drop-target {
			position: absolute;
			top: 12px;
			left: 12px;
			width: 100px;
                        height: 100px;
			background-color: #eee;
			border: 1px solid #ccc;
			text-align: center;
			padding: 12px;
		}
		#preview {
			width: auto;
			margin-left: 148px;
			height: 100px;
			height: 640px;
			background-color: #eee;
			padding: 12px;
			border: 1px solid #ccc;
		}
</style>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script src="exif.js"></script>
</head>
<body>

<!-- content wrapper -->

<div class="main"><div class="center clear">

<!-- main content column -->

<main id="main">

<!--CONTENT-->

<div class="demo-wrapper">

	<div><input type="file" id="fileselect" name="fileselect"   /></div>

	<div id="preview-row">
		<div id="drop-target">Drop image file here.</div>
		<div id="preview">
			<canvas id="canvas"></canvas>
		</div>
	</div>

        <div><input id="imagetext" autofocus  /> </div>
 
        <div id="upload-image"><button id="mysubmit" onclick=myupload_dojo()>upload</button><span id="uploadmessage"></span></div> 
 
        <div id="messages">
        </div>	
	
<script>

var IMG_NAME;
var IMG_TYPE;
var IMG_DATA;
var IMG_ORIENTATION = 1;

	require(["dojo/dom", "dojo/domReady!"], function(dom){
		// var MAX_HEIGHT = 100;
		var MAX_HEIGHT = 640;
		var target = dom.byId("fileselect");
		var preview = dom.byId("preview");
		var canvas = dom.byId("canvas");

                document.getElementById("mysubmit").disabled = true;

		var render = function(src){

			var img = new Image();
			img.onload = function(){
                   
                            if ( IMG_TYPE == "image/jpeg" ) {  
                                EXIF.getData(img, function() {
                                    // alert(EXIF.pretty(this));
                                    IMG_ORIENTATION = EXIF.getTag(img, "Orientation");
                                    if ( isNaN(IMG_ORIENTATION) ) {
                                        IMG_ORIENTATION = 1;
                                    }
                                });
                            }
                                if ( img.height > MAX_HEIGHT || img.width > MAX_HEIGHT ) {
                                    if ( img.height > img.width ) {
                                        img.width  = ( MAX_HEIGHT / img.height ) * img.width;
                                        img.height = MAX_HEIGHT;
                                    } else {
                                        img.height = ( MAX_HEIGHT / img.width ) * img.height;
                                        img.width  = MAX_HEIGHT;
                                    } 
                                }
                   		var ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				preview.style.width = img.width + "px";
				preview.style.height = img.height + "px";
				canvas.width = img.width;
				canvas.height = img.height;
                                // alert('ch= ' + canvas.height + ' cw= ' + canvas.width);
				ctx.drawImage(img, 0, 0, img.width, img.height);
                                IMG_DATA = encodeURIComponent(document.getElementById("canvas").toDataURL("image/jpeg", 0.8));
                                document.getElementById("mysubmit").disabled = false;
			};
			img.src = src;
		};

		var readImage = function(imgFile){
			if(!imgFile.type.match(/image.*/)){
				console.log("The dropped file is not an image: ", imgFile.type);
				return;
			}

                        IMG_NAME = imgFile.name;
                        IMG_TYPE = imgFile.type;

			var reader = new FileReader();
			reader.onload = function(e){
				render(e.target.result);
			};
			reader.readAsDataURL(imgFile);
		};
		target.addEventListener("change", function(e){
			e.preventDefault(); 
			readImage(e.target.files[0] || e.dataTransfer.files[0]);
		}, true);
	});

	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}

	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}

function myupload_dojo () {
require(["dojo/request"], function(request, id){

        if ( !IMG_DATA.length ) {
            alert("Image is not ready to upload. Try again.");
        } 

        var image_text = document.getElementById('imagetext').value;

        var myRequest = {         // create a request object that can be serialized via JSON
            imagename:        IMG_NAME,
            imagetype:        IMG_TYPE,
            imageorientation: IMG_ORIENTATION,
            imagetext:        image_text,
            imagedata:        IMG_DATA
        };

        var json_str = JSON.stringify(myRequest);

        var m = $id("uploadmessage");
        m.innerHTML = " <strong>... uploading ...</strong>";

    request.post("http://image.soupmode.com/addimagejson", {
        data: { json_str: json_str },
        handleAs: "json" 
    }).then(
        function(data){
            console.log("The server returned: ", data.image_url);
            Output("<p><strong>" + IMG_NAME + "</strong> uploaded.</p>\n<p><img src=\"" + data.image_url + "\">\n<br /><a href=\"" + data.image_url + "\">" + data.image_url + "</a></p><br />\n");
            document.getElementById('imagetext').value=''; 
            document.getElementById('fileselect').value=''; 
            m.innerHTML = " ";
            document.getElementById("mysubmit").disabled = true;
        },
        function(error){
            console.log("An error occurred: " + error); 
            document.getElementById("mysubmit").disabled = true;
            m.innerHTML = " <strong>... An Error Occurred. Try Again ...</strong>";
        }
    );
});
}

</script>
</div>


</main>

</body>
</html>
From JR's : articles
568 words - 6533 chars - 3 min read
created on Jul 01, 2015 at 09:25:29 pm - #
source - versions