Question

此jquery脚本可以通过调整图像URL来裁剪任何图像以使其大小正确。这是我在web中找到的唯一一个Jquery脚本，用于特定div / elements 的裁剪图像。问题是突然脚本无法将图像裁剪为正确的大小，脚本的width-height变量为var w = 200和var h = 150但问题是宽度变量无法正常工作，裁剪图像的高度和宽度变得相同。仅表示高度变量有效，输出裁剪图像变为 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＆gt;
注意：我正在使用最新的Chrome并且它无效，版本43.0.2357.130，也无法在最新的Firefox中使用。请使用Inspect元素[Shift + Ctrl + I]查看原始大小或下载裁剪后的图像。

我无法找到任何原因/问题，为什么图像不能裁剪到正确的尺寸？什么是解决方案？请帮忙：（
提前致谢。

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

我找到了topic，并做了一些测试，

然后我发现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，并且有效。不确定原始帖子上的拼写错误或功能是否已更改。

＆＃13;

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);
 });

＆＃13;

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

＆＃13;

图像未裁剪为正确尺寸

2 个答案: