Reputation: 1480
I have this function that resizes an image (after that I have some other stuff to rotate and crop to a square. The problem here is I want the user be able to post images that are at least 640x640. What happens with this function is that if a user posts a 1080X1920 image (iphone picture), it will resize it to 562 X 1000 and then (with not shown code) it will be cropped to 562 X 562 ... The server will so refuse the image because it's smaller then 640X640. Can anyone help me improve this function so that it will return max width and height 1000 X 1000 but also respect a min width and height 640 X 640 ? By experimenting I found that if I set the Max Width and Height to 1138 the same 1080X1920 px image will be cropped to 640X640 but that is not acceptable solution. Any clue?
img.onload = function () {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d"),
start_Y,
start_X;
console.log( width, " ", height);
var MAX_WIDTH = 1000;
var MAX_HEIGHT = 1000;
// set proper canvas dimensions before transform & export
if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
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 = height;
canvas.height = width;
console.log(canvas.width, " ", canvas.height);
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
canvas.width = width;
canvas.height = height;
console.log(canvas.width, " ", canvas.height);
}
}
maybe I found a way, I modified the function like this:
img.onload = function () {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d"),
start_Y,
start_X;
var MAX_WIDTH = 1000;
var MAX_HEIGHT = 1000;
var MIN_WIDTH = 640;
var MIN_HEIGHT = 640;
var ratio;
// set proper canvas dimensions before transform & export
if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
if (width > height) {
console.log('w > h');
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
if(height < MIN_HEIGHT){
ratio = MIN_HEIGHT / height;
height = MIN_HEIGHT;
width = MAX_WIDTH * ratio;
}else{
width = MAX_WIDTH;
}
}
} else {
console.log('h > w');
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
if(width < MIN_WIDTH){
ratio = MIN_WIDTH / width;
width = MIN_WIDTH;
height = MIN_HEIGHT * ratio;
}else{
height = MAX_HEIGHT;
}
}
}
canvas.width = height;
canvas.height = width;
console.log(canvas.width, " ", canvas.height);
} else {
console.log('other Orientations');
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
if(width < MIN_WIDTH){
ratio = MIN_WIDTH / width;
width = MIN_WIDTH;
height = MAX_HEIGHT * ratio;
}else{
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
console.log(canvas.width, " ", canvas.height);
}
}
Upvotes: 1
Views: 1906
Reputation: 141
You have to calculate a ratio like this when width is bigger than height
var ratio = 640 / height;
Or
var ratio = 640 / width;
Having this ratio you can calculate the other value
Height = ratio × height;
Width = ratio × width;
After this you have a redized image / element.
Upvotes: 1