asked on

Trying to understand and modify the client side image resizing javascript

I might be a little ambitious trying to get an answer to this question, but here goes. I'm going to make myself sound like an idiot too. I'm trying to figure out and modify the client side image resizing script from here.... http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html . This script uses some techniques which I just don't have a firm grasp on yet. We have this big function, function (global, $width, $height, $file, $message, $img), which has nested functions such as function resampled(data) which is called within another nested function, function loadResamp(e), by just using the name resampled and not passing a variable in it like resampled(myVariable). I just don't understand how or where the 'data' in resampled(data) and 'e' in loadResamp(e) are used or come from. Also, within the loadResamp function it calls the Resample function from resample.js like this.result and this._width. I guess 'this' is the FileReader created in $file.addEventListener("change", function change() ? And what is 'result' in this.result? Moreover, for $file.addEventListener("change", function change() to work and resmple/resize the image it has to meet this condition....

} else if(
     //
    //there is a files property
    // and this has a length greater than 0
    ($file.files || []).length &&
    // the first file in this list 
    // has an image type, hopefully
    // compatible with canvas and drawImage
    // not strictly filtered in this example
    /^image\//.test((file = $file.files[0]).type)
   ) {

Open in new window

I do not understand at all what is happening here. What is the deal with... /^image\ ?

As for the resample.js I don't understand why we need....
var Resample = (function (canvas) {
and...
this.document.createElement("canvas"))
to begin and end the script. There are many other places I don't get in resample.js like...
var load = typeof img == "string"
and...
load ? (i.src = img) : onload.call(img);
and I don't understand why the onload function couldn't just be in the Resample function.

I'd like to modify this script to process images when the page loads, not after it's been uploaded in an html form, but I'm just not getting it. You can look and laugh at my attempts at.....
http://www.geology.ar.gov/test/clientSide_imageResizing2.html
http://www.geology.ar.gov/test/css_photoScroll_imageResize2.html
I get the error FileReader.readAsDataURL does not implement interface Blob.

I obviously could use some expert help.

Gary

I'd like to modify this script to process images when the page loads

The user has to select a file first, you cannot just load any image.
The file is not uploaded but read at clientside.

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Nate_LR

ASKER

After some more 'Googling' I found a solution.....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>
		wo = window.onload;
		window.onload = function() {
			wo && wo.call(null);
			
			// Get the image
			var sampleImage = document.getElementById("ringoImage");			
			var reducedImage = convertImageToCanvas(sampleImage);
			
			// Actions
			sampleImage.src = reducedImage.src;
			
			
			// Converts image to canvas; returns new canvas element
			function convertImageToCanvas(image) {
				var mainCanvas = document.createElement("canvas");
				mainCanvas.width = image.width;
				mainCanvas.height = image.height;
				mainCanvas.getContext("2d").drawImage(image, 0, 0, mainCanvas.width, mainCanvas.height);
				//size = parseInt($('#size').get(0).value, 10);
				size = 500;
				while (mainCanvas.width > size) {
					mainCanvas = reduceSize(mainCanvas);
				}
				//return mainCanvas;
				var image = new Image();
				image.src = mainCanvas.toDataURL("image/png");
				return image;
			}
			
			
			function reduceSize(i) {
				var canvas = document.createElement("canvas");
				canvas.width = i.width / 1.2;
				canvas.height = i.height / 1.2;
				var ctx = canvas.getContext("2d");
				ctx.drawImage(i, 0, 0, canvas.width, canvas.height);
				return canvas;
			};

			
		};
	</script>
</head>

<body>


	<p>
		<img src="PetitJeanPics/DSCN0216.JPG" id="ringoImage" />
	</p>
	
	
    
</body>
</html>

Open in new window

Nate_LR

ASKER

Thanks!

Dave Baldwin

You're welcome, glad to help.