Please follow the below example to Image resizing
client-side with JavaScript before upload to the server. In modern browser you
can use canvas to load and save images data. All modem browsers are supported
to the FileReader.
/// How do I read image using
FileReader?
/// Example to read file using
FileReader.
<input
type='file'
accept='image/*'
onchange='openFile(event)'><br>
<img
id='output'>
<script>
var openFile
= function(event)
{
var input
= event.target;
var reader
= new FileReader();
reader.onload
= function(){
var dataURL
= reader.result;
var output
= document.getElementById('output');
output.src
= dataURL;
};
reader.readAsDataURL(input.files[0]);
};
</script>
/// How do I resize an image on the
client size before upload?
/// JavaScript compress image before
upload.
/// Resize image (client side) on an
html form before upload in your applications.
<!doctype html>
<html>
<head>
<meta
content="text/html;
charset=UTF-8" http-equiv="Content-Type"
/>
<title>JavaScript/jQuery
- compress image before upload.</title>
<script
type="text/javascript">
var
fileReader = new
FileReader();
var
filterType =
/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
fileReader.onload
= function (event)
{
var image
= new Image();
image.onload=function(){
document.getElementById("original-Img").src=image.src;
var canvas=document.createElement("canvas");
var context=canvas.getContext("2d");
canvas.width=image.width/4;
canvas.height=image.height/4;
context.drawImage(image,
0,
0,
image.width,
image.height,
0,
0,
canvas.width,
canvas.height
);
document.getElementById("upload-Preview").src
= canvas.toDataURL();
}
image.src=event.target.result;
};
var
loadImageFile = function
() {
var uploadImage
= document.getElementById("upload-Image");
//check and retuns the length of uploded file.
if (uploadImage.files.length
=== 0) {
return;
}
//Is Used for validate a valid file.
var uploadFile
= document.getElementById("upload-Image").files[0];
if (!filterType.test(uploadFile.type))
{
alert("Please
select a valid image.");
return;
}
fileReader.readAsDataURL(uploadFile);
}
</script>
</head>
<body
onload="loadImageFile();">
<form
name="uploadForm">
<table>
<tbody>
<tr>
<td>Select
Image - <input
id="upload-Image"
type="file"
onchange="loadImageFile();"
/></td>
</tr>
<tr>
<td>Origal
Img - <img
id="original-Img"/></td>
</tr>
<tr>
<td>Compress
Img - <img
id="upload-Preview"/></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Result looks like – https://embed.plnkr.co/oyaVFn/
I hope you are enjoying with this post!
Please share with you friends!! Thank you!!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
