55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
|
|
var loadFile = function(event) {
|
|
var reader = new FileReader();
|
|
reader.onload = function(){
|
|
var preview = document.getElementById('preview_img');
|
|
preview.src = centerCrop(reader.result);
|
|
preview.src = resize(preview.src);
|
|
};
|
|
reader.readAsDataURL(event.target.files[0]);
|
|
};
|
|
|
|
function centerCrop(src){
|
|
var image = new Image();
|
|
image.src = src;
|
|
|
|
var max_width = Math.min(image.width, image.height);
|
|
var max_height = Math.min(image.width, image.height);
|
|
|
|
var canvas = document.createElement('canvas');
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
canvas.width = max_width;
|
|
canvas.height = max_height;
|
|
ctx.drawImage(image, (max_width - image.width)/2, (max_height - image.height)/2, image.width, image.height);
|
|
return canvas.toDataURL("image/png");
|
|
}
|
|
|
|
function resize(src){
|
|
var image = new Image();
|
|
image.src = src;
|
|
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
|
|
var dst = document.createElement('canvas');
|
|
dst.width = image_dimension;
|
|
dst.height = image_dimension;
|
|
|
|
window.pica.WW = false;
|
|
window.pica.resizeCanvas(canvas, dst, {
|
|
quality: 2,
|
|
unsharpAmount: 500,
|
|
unsharpThreshold: 100,
|
|
transferable: false
|
|
}, function (err) { });
|
|
window.pica.WW = true;
|
|
return dst.toDataURL("image/png");
|
|
}
|
|
|