图像未裁剪为正确的尺寸 [英] Images not Cropped to correct size

问题描述

此jquery脚本可以通过调整图像URL来将任何图像裁剪为正确的大小.这是我在Web中找到的针对特定div/elements的 crop image 的唯一Jquery脚本.问题是脚本突然无法裁剪图像以达到正确的大小，脚本的width-height变量为var w = 200和var h = 150，但问题是 width 变量不起作用，裁剪了图像的高度和宽度变成相同的大小.表示仅高度变量有效，输出的裁剪图像变为 150px X 150px . 应为200px X 150px.

This jquery script can crop any image to correct size by tweaking the image url. This is the only Jquery script in web i have found for crop image of specific div/elements. Problem is suddenly the script is not able to crop image to correct size, the script's width-height variable is var w = 200 and var h = 150 but problem is width variable is not working, cropped images height and width became the same size. Means only height variable works, output cropped image became 150px X 150px. It should 200px X 150px.

JS:

var w = 200;
var h = 150;
$('.crop').find('img').each(function(n, image){
  var image = $(image);
  image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});
  image.attr('width',w);
  image.attr('height',h);
 });

问题小提琴>
注意::我使用的是最新版的chrome，它无法运行，版本为43.0.2357.130，也无法在最新的Firefox中使用.并且请使用Inspect元素[Shift + Ctrl + I]查看原始尺寸，或下载裁剪后的图像.

Problem Fiddle >
NOTE: I'm using Latest chrome and it's not working, Version 43.0.2357.130 and also not work in latest Firefox. And please see the original size using Inspect element [Shift+Ctrl+I] or download the cropped image.

我找不到任何原因/问题，为什么图像无法裁剪为正确的尺寸?解决方案是什么?请帮忙 :(
谢谢！

I have not able to find any reason/problem why Images not Crop to correct size? and what is the solution? please help :(
Thanks in advance.

推荐答案

我发现

I found that topic, and make some test,

然后我发现s200-h150-c似乎很奇怪

所以我替换

image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});

到

image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'w' + w + '-h' + h +'-c')});

随着s200-h150-c变为w200-h150-c，它可以工作.不确定原始帖子上有错字或功能已更改.

With s200-h150-c become w200-h150-c, and it works. Not sure there's typo on origin post or the function changed.

var w = 200;
var h = 150;
$('.crop').find('img').each(function(n, image){
  var image = $(image);
  image.attr('src' , image.attr('src').replace(/s\B\d{2,4}/,'w' + w + '-h' + h +'-c'));
  image.attr('width',w);
  image.attr('height',h);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Please save the croped Image for see the actual result.
<br/><br/>
1) After Crop (Result: 150px X 150px ) 
<br><br>
<div class="crop">
<img src="http://1.bp.blogspot.com/-R7XPICyjSZA/VRaUCQteV1I/AAAAAAAABLc/PSsERo55dIg/s1600/artworks-000103151765-uxzfpd-t500x500.jpg"/>
</div>
<br/><br/>
2) After Crop (Result: 150px X 150px )
<br/><br/>
<div class="crop">
<img src="http://4.bp.blogspot.com/-YTDvE4-4L0o/VIkaNloCRCI/AAAAAAAAAu0/8Q0MkvJyGZE/s1600/pc-type65756.jpg"/>
</div>
<br/>

这篇关于图像未裁剪为正确的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！