【发布时间】：2017-12-08 05:47:08
【问题描述】：
我有这个调整图像大小的功能（之后我还有一些其他的东西要旋转并裁剪成正方形。 这里的问题是我希望用户能够发布至少 640x640 的图像。这个函数会发生什么，如果用户发布一个 1080X1920 的图像（iphone 图片），它会将其大小调整为 562 X 1000，然后（没有显示代码）它将被裁剪为 562 X 562 ...服务器将这样拒绝图像，因为它小于 640X640。 谁能帮我改进这个功能，使它返回最大宽度和高度 1000 X 1000 但也尊重最小宽度和高度 640 X 640 ？ 通过实验，我发现如果我将最大宽度和高度设置为 1138，则相同的 1080X1920 像素图像将被裁剪为 640X640，但这是不可接受的解决方案。有什么线索吗？
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);
}
}
也许我找到了办法，我把函数修改成这样：
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);
}
}
【问题讨论】：
-
据我了解，您希望最终的正方形图像的大小为 640 到 1000。这意味着如果两个维度都 > 1000，您只需将大小调整为 1000，另一个维度更大.这意味着 1920x1080 的图像将缩小到 1778 x 1000。裁剪它会得到一个 1000x1000 的正方形。
-
是的，你是对的。这就是现在发生的情况，您将得到一个 1000X1000 的正方形，但是如何将最小值限制为 640？
-
如果现在发生了这种情况，为什么您的问题会说 1920x1080 图像发生了完全不同的事情？
-
我说的不是1920x1080而是1080x1920，请查收
-
哦，我明白了。在计算调整大小时无需区分这两种格式：jsfiddle.net/khrismuc/xvz6xyhv
标签： javascript image resize min