Jquery - 如何裁剪图像并缩放与原始图像相同的尺寸 [英] Jquery - How to crop a image and scale it same size as the original image

问题描述

我想通过给出（xAxis，yAxis，Height，Width）从原始图像裁剪图像。

所有裁剪后的图像应该如同大如下方框

[

• jQuery仅用于确定图像宽高比




• CSS将图像置于容器元素内，并根据宽高比调整它们的大小
  与容器相比。




• 仅通过容器进行裁剪 overflow：hidden

  $（window）.on（load，function（）{//等待图片加载$（。crop img）。 （function（）{//循环通过要裁剪的图像if（（$（this）.width（）/ $（this）.height（））< （$（this）.parent（）。width（）/ $（this）.parent（）。height（）））//比较宽高比$（this）.addClass（talller）; }）;}）;  

  body {padding：0; margin：0;}。crop {position：relative;显示：内联块;宽度：200px;身高：150px;溢出：隐藏; / *隐藏裁剪溢出的图像部分* / border：1px solid＃000;}。crop img {position：relative; box-sizing：border-box;最高：50％;左：50％; transform：translate（-50％， -  50％）; / *以溢出元素为中心* / width：auto;身高：100％; / *适合高度，水平溢出* /边框：2px红色虚线; / *高亮显示img border for demonstration * /}。crop img.taller {width：100％;身高：自动; / *适合宽度，垂直溢出* /}  

 < ; script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< span class =crop> < img src =https://upload.wikimedia.org/wikipedia/commons/8/82/Tyndall_Effect_seen_in_Nature.jpg>< / span>< span class =crop> < img src =https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg>< / span>< span class =crop style =height：80px;> < img src =https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg>< / span>  

I want to crop a image from original image by giving (xAxis, yAxis, Height, Width).

all the cropped image should just as big as the boxes belows

[2

and make the cropped part to a fix size so I can show those cropped image orderly on the web no matter the height and width given by user.

I try using jrac however it required me to save the cropped image before I show with tag. Also I tried use pure css to complete this.

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

However the idea of css to crop image is just to hide the other part of the image and if I resize it as the original image. The other part appear again. I'm wondering what is the good approach to do so?

解决方案

CSS IMG Fill the container width/height. Recognize IMG aspect ratio.

EDIT: I had to scrap the idea of using image orientation. Aspect Ratio makes more sense.

This could work - Pictures are from wikimedia. One is vertical, second is horizontal. They are centered and fit to width/height. I had to change $(document).ready() to $(window).on("load") - because the document ready waits only for HTML DOM to be fully loaded, but if images weren't downloaded yet, it would falsely recognize img dimensions and therefore its aspect ratio (EDIT) .

• jQuery is used only to determine the Image Aspect ratio

• CSS centers the images inside the container element and resizes them according to the aspect ratio in comparison to the container.

• Cropping is done simply by containers overflow:hidden

$(window).on("load",function() {//wait for images to be loaded
  $(".crop img").each(function() {//loop through images to be cropped
    if (($(this).width()/$(this).height()) < ($(this).parent().width()/$(this).parent().height()))//compare Aspect ratio
      $(this).addClass("taller");
  });
});

body{padding:0;margin:0;}
.crop {
  position: relative;
  display:inline-block;
  width: 200px;
  height: 150px;
  overflow: hidden;
  /*hide "crop" overflowing parts of images*/
  border:1px solid #000;
}

.crop img {
  position: relative;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*center the overflowing element*/
  width: auto;
  height: 100%;
  /*Fit to height, overflow horizontally*/
  border:2px dashed red;
  /*highlight img borders for demonstration*/
}

.crop img.taller{
  width: 100%;
  height: auto;
  /*Fit to width, overflow vertically*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="crop">
   <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Tyndall_Effect_seen_in_Nature.jpg">
</span>
<span class="crop">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg">
</span>
<span class="crop" style="height:80px;">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/WolayerSee.jpg/800px-WolayerSee.jpg">
</span>

这篇关于Jquery - 如何裁剪图像并缩放与原始图像相同的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！