画布裁剪：调整图像大小，保持纵横比和中心？提琴手答案

【问题标题】：Canvas crop: resize image, mantain aspect ration and center? JsFiddle画布裁剪：调整图像大小，保持纵横比和中心？提琴手
【发布时间】：2014-07-18 05:07:24
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

我自己解决了，很难 :D 我花了 2 小时，因为我从未使用过画布 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;
                      }

图像居中并按匹配大小裁剪。我希望它也能帮助你。湾

【讨论】：