图像未裁剪至正确尺寸

Question

此 jquery 脚本可以通过调整图像 url 来裁剪任何图像以使其大小正确。这是我在网络上找到的唯一 Jquery 脚本，用于 裁剪特定 div/elements 的图像。问题是脚本突然无法将图像裁剪到正确的大小，脚本的 width-height 变量是 var w = 200 和 var h = 150 但问题是 width 变量不是工作，裁剪后的图像高度和宽度变得相同。意味着只有高度变量起作用，输出裁剪图像变成 150px X 150px。 应该是 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);
 });

问题Fiddle >
注意： 我使用的是最新的 chrome 但它无法正常工作，版本 43.0.2357.130 并且在最新的 Firefox 中也无法正常工作。请使用 Inspect 元素 [Shift+Ctrl+I] 查看原始尺寸或下载裁剪后的图像。

我找不到任何 reason/problem 为什么图片没有裁剪到正确的尺寸？什么是解决方案？请帮忙：（
提前致谢。

Answer 1

您在 attr 方法中使用了花括号 { }，这是不允许使用的，因为 attr 不接受对象 {} 作为参数。

因此，您可以更改为：

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}/,'s' + w + '-h' + h +'-c'));

但更好的解决方案是这样使用：

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

您可以使用 css 设置宽度和高度，如下所示：

image.css({'width':w,'height':h});

Answer 2

我发现了，并做了一些测试，

然后我发现 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，就可以了。不确定来源是否有拼写错误 post 或功能已更改。

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/>

图像未裁剪至正确尺寸

Images not Cropped to correct size

javascript

jquery

image

crop