[HELP] Resize pictures client side implantation

[drascom]

hi all;
i found nice and easy script for resizing pictures in client side.i wanna put this script in lib.php and use it before upload but i have no idea how to to it.

it using form element named photo and function catch it.
also we use form for uploading photos in appgini but i dont know how to change function to use with our form

This is the script adress:
http://kimsal.com/shrinker/

this the code:

Code: Select all

function upload() {
	var photo = document.getElementById("photo");
	var file  = photo.files[0];

	var preview = document.getElementById("preview");
	preview.src = file.getAsDataURL();
	return _resize(preview);
}

function _resize(img, maxWidth, maxHeight) 
{
        var ratio = 1;

	var canvas = document.createElement("canvas");
	canvas.style.display="none";
	document.body.appendChild(canvas);

	var canvasCopy = document.createElement("canvas");
	canvasCopy.style.display="none";
	document.body.appendChild(canvasCopy);

	var ctx = canvas.getContext("2d");
	var copyContext = canvasCopy.getContext("2d");

        if(img.width > maxWidth)
                ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
                ratio = maxHeight / img.height;

        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
try {
        copyContext.drawImage(img, 0, 0);
} catch (e) { 
	document.getElementById('loader').style.display="none";
//	alert("There was a problem - please reupload your image");
	return false;
}

        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        // the line to change
        //ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
        // the method signature you are using is for slicing
        ctx.drawImage(canvasCopy, 0, 0, canvas.width, canvas.height);

    	var dataURL = canvas.toDataURL("image/png");

	document.body.removeChild(canvas);
	document.body.removeChild(canvasCopy);
    	return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");


};

function resize() { 
	var photo = document.getElementById("photo");


	if(photo.files!=undefined){ 

		var loader = document.getElementById("loader");
		loader.style.display = "inline";

		var file  = photo.files[0];
		document.getElementById("orig").value = file.fileSize;
		var preview = document.getElementById("preview");
		var r = new FileReader();
		r.onload = (function(previewImage) { 
			return function(e) { 
				var maxx = document.getElementById('maxx').value;
				var maxy = document.getElementById('maxy').value;
				previewImage.src = e.target.result; 
				var k = _resize(previewImage, maxx, maxy);
				if(k!=false) { 
				document.getElementById('base64').value= k;
				document.getElementById('upload').submit();
				} else {
alert('problem - please attempt to upload again');
				}
			}; 
		})(preview);
		r.readAsDataURL(file);
	} else {
		alert("Seems your browser doesn't support resizing");
	}
	return false;
}

this is the lib.php section have to use resizing before that:

Code: Select all

if(!@move_uploaded_file($f['tmp_name'], $dir . $n)){