Input type=fileで受け取ったイメージファイルをJavascript/Canvasを使ってリサイズする方法
スケールを合わせたリサイズをCanvasを使って行いました。たかがリサイズ、されどリサイズ。。
$('#imgcapture').change(function(e){
var image = new Image();
var reader = new FileReader();
var file = this.files[0];
if (!file.type.match(/^image\/(png|jpeg|gif)$/)) return;
reader.onload = function (event) {
image.onload = function() {
//Resize to 800x600
var width = image.width;
var height = image.height;
var chouhen = (width>=height) ? width : height;
var new_size = 800; //px
var canvasheight;
var canvaswidth;
if (chouhen < new_size){
canvaswidth = width;
canvasheight = height;
}
else{
canvaswidth = parseFloat(new_size)/chouhen * width;
canvasheight = parseFloat(new_size)/chouhen * height;
}
// Create canvas and create resized image
var canvas0 = document.createElement('canvas');
canvas0.width = parseInt(canvaswidth);
canvas0.height = parseInt(canvasheight);
var context = canvas0.getContext("2d");
//console.log(image, 0, 0, canvaswidth, canvasheight);
context.drawImage(image, 0, 0, canvaswidth, canvasheight);
var resized_img = canvas0.toDataURL("image/jpeg");
$('#showimg').attr('src', resized_img);
}
image.src = event.target.result;
};
reader.readAsDataURL(file);
});