可以裁剪外部图像的jQuery插件

Posted 2023-02-25

【中文标题】可以裁剪外部图像的jQuery插件

【英文标题】：Jquery plugin that can crop external images

【发布时间】：2015-04-16 06:00:48

【问题描述】：

我正在尝试将 Lazyload 图像裁剪为正确的大小。我有下面给出的简单 jquery 插件，它可以通过调整图像 url 来调整图像大小和裁剪图像以正确大小。在 Lazyload 插件加载图像后，此 jQuery 代码会自动将图像裁剪为正确的大小。但它不能裁剪所有图像，它只裁剪所有图像中的一张。

小提琴：http://jsfiddle.net/e0myc0po/4/ 看到它只裁剪了第 3 幅图像！

JS：

外部资源：https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.5/jquery.lazyloadxt.js

$.extend($.lazyLoadXT, 
    onload:myfunc
);

function myfunc()
    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);
 );


function myfunc()
    var w = 200;
var h = 150;
$('#another-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);
 );

HTML：

1
<div id="crop">
<img data-src=""/>
</div>
<br/>
2
<div id="crop">
<img data-src=""/>
</div>
<br/>
3
<div id="another-crop">
<img data-src=""/>
</div>
<br/>
4
<div id="another-crop">
<img data-src=""/>
</div>

所以我的问题是为什么它不裁剪所有图像，解决方案是什么？ 谢谢。

【参考方案1】：

简单。您有两个或多个 html 标记的 ID 和两个函数 myfunc() 的声明。单个页面上任何标签元素的ID都应该是唯一的！！ :)

<div id="crop">
....
<div id="crop-foo">
....
<div id="crop-something-else">

将 id="crop" 更改为 class="crop" 然后在 JS 中将 #crop 更改为 .crop 同样适用：#another-crop / id="another-crop" - 将其更改为一个类

也做一个 myFunc()

function myfunc()
    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);
 );
$('#another-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);
 );

工作示例：http://jsfiddle.net/e0myc0po/6/

【讨论】：

您的意思是它不适用于 id？但是我在裁剪的同一页面上有不同的类和不同的 id，这意味着我必须在同一页面上为不同的类和不同的 id 实现此代码。我该怎么办？

我必须在同一页面上使用不同大小的不同类别和不同 id 的图像，我该怎么办？

将一个类命名为“size-one”，并为每个 .size-one 将图像的大小更改为某个宽度和高度。将另一个 div 类命名为“size-two”，并以此类推的方式将图像的大小更改为首选。

我已经关注了，但它只裁剪了 3 号和 4 号图像。小提琴：jsfiddle.net/e0myc0po/8

jsfiddle.net/e0myc0po/10 最简单的解决方案。将函数名称更改为 myfunc2() 并在 myfunc() 中触发它

【参考方案2】：

不需要两次定义相同的函数。检查这个小提琴http://jsfiddle.net/3xphkmsq/你只需要提到class而不是id

【讨论】：

您的意思是它不适用于 id？但是我在裁剪的同一页面上有不同的类和不同的 id，这意味着我必须在同一页面上为不同的类和不同的 id 实现此代码。我该怎么办？

你可以做多个id选择$("#crop,#crop1,#crop2").find()。这样您就不必为每个 id 一次又一次地定义函数。

我必须在同一页面上使用不同大小的不同类别和不同 id 的图像，我该怎么办？

我已经关注了，但它只裁剪了 3 号和 4 号图像。小提琴：jsfiddle.net/e0myc0po/8

因为正如我告诉您的那样，您的覆盖myfunc 没有用相同的名称定义函数两次。看到这个小提琴jsfiddle.net/kaz6gv51