画布裁剪：调整图像大小，保持宽高比和中心？的jsfiddle

Question

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

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

到目前为止我做了:(

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

Answer 1

由我自己解决，很难：D它让我2小时因为我从未使用过画布xD所以我的最终解决方案就在这里 - ＆gt; 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;
                      }

图像通过匹配大小居中并弯曲。 我希望它也会对你有所帮助。 湾