javascript - 如何在固定尺寸的盒子内按高度调整图像，并在上传后保持图像尺寸

Question

我的目标是将图像大小限制为 height:160px; width:270px; 通过按高度调整图像大小。如果可能的话，我想让用户裁剪图像并上传到服务器。 here是例子的链接。

我的代码示例->

<div class="col-sm-12">
  <div class="hotel-list">
    <div class="row image-box hotel listing-style1">
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery image-container">
              <img width="270" height="160" alt="" src="../Done/images/sideWhite.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
															<small style="padding-left:1%;">avg/night</small>
															$620
														</span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/white1028.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
															<small style="padding-left:1%;">avg/night</small>
															$620
														</span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/white1028.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
															<small style="padding-left:1%;">avg/night</small>
															$620
														</span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/backWhite.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
															<small style="padding-left:1%;">avg/night</small>
															$620
														</span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/sideWhite.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
															<small style="padding-left:1%;">avg/night</small>
															$620
														</span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-md-4">
        <article class="box">
          <figure>
            <a href="#" class="popup-gallery">
              <img width="270" height="160" alt="" src="../Done/images/sideGray.jpg">
            </a>
          </figure>
          <div class="details" style="background-color:white;">
            <span class="price">
															<small style="padding-left:1%;">avg/night</small>
															$620
														</span>
            <h2 style="margin-bottom:1%; color:#C11B17;"><label>trav...</label></h2>
            <h4>with me in my Ferrari at Mazda Raceway Laguna Seca</h4>
            <div class="feedback">
              <div data-placement="bottom" data-toggle="tooltip" class="five-stars-container" title="" data-original-title="4 stars"><span style="width: 80%;" class="five-stars"></span>
              </div>
              <span class="review red-color">270 reviews</span>
            </div>
            <div class="feedback">
              COUNTRY
              <span class="review red-color">Korea</span>
            </div>
            <div class="feedback">
              GUEST(S)
              <span class="review red-color">1 - 4</span>
            </div>
            <div class="action">
              <a class="button btn-small white" style="color:#dcdc00; border:solid 1px;" data-toggle="model" data-target="#WishlistPopup">Save</a>
              <!--alan this button-->
              <a class="button btn-small green popup-map" href="#" data-box="48.856614, 2.352222">Explore</a>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

Answer 1

我找到了 github resource陈丰元。它被授权为 MIT .如您所愿，它提供了裁剪图像的所有解决方案。它也有据可查。如果您希望更改是永久性的，您可以使用 getCroppedCanvas([options]) 获取裁剪后的图像数据。并将其发送到服务器端语言如 php 以保存为图像。这是一个链接，您可以检查将 Canvas 数据上传到 php: Uploading 'canvas' image data to the server

如果没有像 php 这样的服务器端语言的帮助，所有的更改都将是暂时的。