var img_resize_thumb = null; # new image base64
var new_max_size = 130;
# on change input file
$("#input_file").change(function(){
reader.onload = function(e) {
var urll = e.target.result;
# get contente input
image.onload = function(imageEvent){
# create canvas with new size
var canvas = document.createElement('canvas'),max_size = new_max_size,width = image.width,height = image.height;
# calculate new size
if(width > height){
if( width > max_size ){
height *= max_size / width;
width = max_size;
}
}else{
if( height > max_size ){
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
img_resize_thumb = canvas.toDataURL('image/png',0.5);
}
image.src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
});
Resize a image wiht jquery. The final result is in base64 in a variable to use.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.