如何在固定尺寸的框內按高度調整圖像並在上傳後保持圖像尺寸

我的目標是通過調整圖像的高度來限制圖像大小爲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"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <small style="padding-left:1%;">avg/night</small> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $620 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </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"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <small style="padding-left:1%;">avg/night</small> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $620 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </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"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <small style="padding-left:1%;">avg/night</small> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $620 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </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"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <small style="padding-left:1%;">avg/night</small> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $620 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </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"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <small style="padding-left:1%;">avg/night</small> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $620 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </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"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <small style="padding-left:1%;">avg/night</small> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $620 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </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>

來源

2016-01-18 ChengWan

請在此處填寫代碼。 –

@ParthTrivedi完成.. – ChengWan

你必須使用服務器端代碼來調整圖像大小然後上傳。 –

我已經找到了github resource由豐原陳。它的許可證號爲MIT。正如你所想，它提供了裁剪圖像的所有解決方案。它也有很好的文檔記錄。如果您希望更改是永久性的，您可以使用getCroppedCanvas([options])獲取裁剪後的圖像數據，並將其發送到服務器端語言（如php）以保存爲圖像。這裏是一個鏈接，你可以檢查上傳畫布數據爲PHP： Uploading 'canvas' image data to the server

沒有像php這樣的服務器端語言的幫助，所有的更改將是暫時的。

來源

2016-01-18 05:40:29

我可以問php可以混合kendoui嗎？因爲我的支持團隊成員表示不能混合。只是想確認一下。 – ChengWan

kendoui只是一個與javascript協同工作的客戶端框架。它與php沒有任何關係。然而，無論你使用什麼樣的客戶端框架，你總是可以將數據發佈到php，並使用良好的'jQuery.ajax（）' –

非常感謝..你對這個網站有什麼想法嗎？ http://icodingclub.blogspot.in/2014/10/introduction-html5-canvas-image-cropper.html我不知道爲什麼我把代碼下來創建新的HTML，但它沒有顯示croped圖像。 – ChengWan

如何在固定尺寸的框內按高度調整圖像並在上傳後保持圖像尺寸

回答

相關問題