画布裁剪:调整图像大小，保持纵横比例和中心?JsFiddle

Question

我想在上传之前存档一些简单的图像调整脚本。我需要允许用户上传图像，并在上传到服务器之前调整大小。例如，我需要一个图像400x300，所以如果用户上传一个1080x680，我需要有相同的图像，但400x300居中。

.-------.-----.-------.      .------.
|///////|     |///////|      |//////|
|///////| 300 |///////|      |------|
|//1080/|  x  |//680//|  or  | 3x4  |   // = crop
|///////| 400 |///////|      |------|
|///////|     |///////|      |//////|
|///////|_____|///////|      |//////|

我到目前为止所做的:

http://jsfiddle.net/StartStep/g25J6/5/

Answer 1

由我自己解决，这很难:D它花了我2h，因为我从来没有使用过画布xD，所以我的最终解决方案是在这里-> http://jsfiddle.net/StartStep/g25J6/7/

              var w = this.width;
                  h = this.height,
                  cw = canvas.width,
                  ch = canvas.height,
                  nx = 0,
                  ny = 0,
                  r = h/w;
                      if(h<w) {
                         //horizontal image
                             r = w/h;
                             nh = 400,
                             nw = r*400;
                             nx = -(nw-300)/2;
                      } else {
                         //vertical image
                             nw = 300,
                             nh = r*300;
                             ny = -(nh-400)/2;
                      }

图像的居中和裁剪匹配的大小。我希望它也会对你有所帮助。湾