画布裁剪：调整图像大小，保持纵横比和居中吗？ JsFiddle

Question

我想在上传之前存档一些简单的图像调整大小脚本。 我需要允许用户上传图像并调整大小，然后再上传到服务器。 例如，我需要一张400x300的图片，因此，如果用户上传1080x680，我需要使用同一张图片，但以400x300为中心。

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

到目前为止，我已经完成了：(

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

Answer 1

由我自己解决，这很困难：D我花了2个小时，因为我从未使用过canvas 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;
                      }

图像居中并通过匹配大小进行裁切。 希望对您有帮助。 湾