图像未裁剪为正确尺寸

Posted 2023-02-25

【中文标题】图像未裁剪为正确尺寸

【英文标题】：Images not Cropped to correct size

【发布时间】：2015-07-09 14:19:27

【问题描述】：

此 jquery 脚本可以通过调整图像 url 来裁剪任何图像以正确大小。这是我为特定 div/元素的裁剪图像找到的唯一的网络 Jquery 脚本。问题是脚本突然无法将图像裁剪为正确的大小，脚本的宽度-高度变量为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\d2,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] 查看原始大小或下载裁剪后的图像。

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

【问题讨论】：

在 attr() 中使用 是错误的

@Bhojendra Nepal 我该怎么办？请拉小提琴。

image.attr('src' , image.attr('src').replace(/s\B\d2,4/,'s' + w + '-h' + h +'-c'));

@Bhojendra Nepal 谢谢，但不起作用，请参阅小提琴：jsfiddle.net/r7fyqxpa/5

@Aabira 看看我的回答，是你想要的吗？

【参考方案1】：

我找到了topic，并进行了一些测试，

然后我发现s200-h150-c 看起来很奇怪

所以我替换

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

到

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

将s200-h150-c 变成w200-h150-c，它就可以工作了。不确定原始帖子是否有错字或功能已更改。

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\d2,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/>

【参考方案2】：

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

所以，你可以改成：

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

有了这个：

image.attr('src' , image.attr('src').replace(/s\B\d2,4/,'s' + w + '-h' + h +'-c'));

---

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

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

---

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

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

【讨论】：

我的意思是使用 jquery 的 css() 方法。抱歉，由于我的互联网连接速度很慢，因此无法创建/查看 jsfiddle。

-谢谢，请给小提琴。

好的，亲爱的，谢谢你的尝试。