hi, as the title says, i want to resize and preview image before i submit it to my server. it is because of reducing load to my server and also give the client ability to crop the image too.
i am using imgareaselect for cropping. and also using a javascript to preview the image. until now this works well.
i wanted to resize the image before crop and upload, so i search a bit and found that i can use canvas for resizing while maintaining the ratio.
but after updated my code this does not works. i am new to javascript. i need your help.
my script
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function previewImage(input) {
var preview = document.getElementById('preview');
var preview_crop_thumb = document.getElementById('preview_crop_thumb');
if (input.files && input.files[0]) {
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result
}
reader.readAsDataURL(input.files[0]);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 550;
var MAX_HEIGHT = 550;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/jpg");
window.onload=function(){
document.getElementById('preview').style.display='block';
document.getElementById('preview_crop').style.display='block';
document.getElementById('image_crop_diolouge').style.display='block';
preview.setAttribute('src', dataurl);
preview_crop_thumb.setAttribute('src', dataurl);
}
} else {
document.getElementById('preview').style.display='none';
document.getElementById('preview_crop').style.display='none';
document.getElementById('image_crop_diolouge').style.display='none';
preview.setAttribute('src', 'placeholder.png');
preview_crop_thumb.setAttribute('src', 'placeholder.png');
}
}
</script>
<style>
.image_crop_diolouge{
font-family: calibri;
color:#7A7A7A;
text-shadow:0px 1px 1px #BDBDBD;
font-weight:bold;
margin:10px;
background:#FFE974;
border:1px solid #FFB28E;
box-shadow:1px 1px 2px #666;
border-radius:1px;
max-width:800px;
padding:10px;
}
#preview_crop{
width: 200px;
height: 200px;
overflow: hidden;
float:right;
display:none;
margin:10px 20px 10px 0px;
}
#preview{
width:550px;
height:550px;
display:none;
float:left;
margin:10px 10px 10px 20px;
}
</style>
<center>
<div style="max-width:800px; ">
<div class="image_crop_diolouge" id="image_crop_diolouge" style="display:none;">Press the left mouse button and drag to crop the image</div>
<img id="preview" src="placeholder.png"/>
<div id="preview_crop" >
<img id="preview_crop_thumb" src="placeholder.png" style="width: 200px;">
</div>
<div class="image_crop_diolouge">
<input type="file" name="image" onchange="previewImage(this)" accept="image/*"/>
</div>
<br/><br/>
</div>
</center>
