如何在固定尺寸的框内按高度调整图像并在上传后保持图像尺寸

我的目标是通过调整图像的高度来限制图像大小为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

如何在固定尺寸的框内按高度调整图像并在上传后保持图像尺寸

回答

相关问题