0

再会。

我使用脚本Imagecropper

脚本：

<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="768" width="1024">

<script>
(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

    var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>

结果： 1

但是如果我不指定图像大小，那么我会得到下一个（见图）： 

<img src="http://test.com/img/1362244329.jpg" id="yui_img">

结果： 2

如果我指定了错误的图片大小，窗口将增加图像的部分：

<img src="http://test.com/img/1362244329.jpg" id="yui_img" height="333" width="500">

结果：

3

如何在标签图像中制作不一定会指定其大小？

4

2 回答 2

3

首先，我想向您指出 YUI 3，因为不再支持 YUI 2。您不应该使用 YUI 2 编写新代码。我为 YUI 3 编写的 ImageCropper 组件与 YUI Gallery 中的 YUI 2 版本一样工作：http: //yuilibrary.com/gallery/show/imagecropper。由于它复制了 YUI 2 ImageCropper 所做的，它与旧版本共享这些问题。

未指定图片大小时怎么办

你得到一个小的 ImageCropper 的原因是你在获取图像之前创建小部件，所以浏览器还不知道它的大小。您可以做的是等待图像的onload事件。您可以监听该事件并在它触发后创建 ImageCropper：

(function() {
  var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;

  var yui_img = Dom.get('yui_img');

  Event.addListener(yui_img, 'load', function () {
    var crop = new YAHOO.widget.ImageCropper(yui_img);
  });

})();

为什么 ImageCropper 不适用于尺寸错误的图像

当图像尺寸不合适时，YUI 2 ImageCropper 和我的 YUI 3 版本都不能处理图像。原因是两者都使用background: url()CSS 样式来显示裁剪区域内的图像（小部件的非变暗部分）。CSS 背景不允许您使用调整大小/缩放的图像。

我计划在某个时候为 YUI 3 版本使用另一种策略来解决这个问题。但是，您需要记住，ImageCropper 组件的设计目的是让您将裁剪坐标发送到服务器，以便它实际裁剪图像。这意味着，如果您为图像设置了错误的尺寸，则图像裁剪器使用其getCropCoords方法返回的坐标将不是与全尺寸图像匹配的坐标。相反，您还必须向服务器发送您一直在使用的图像大小，并进行额外的数学运算以正确裁剪图像。

总之，您不应该使用尺寸错误的图像。您可以通过两种方式修复图像的大小：

  1. 使用图像的 HTML5naturalWidth和naturalHeight属性。即使调整了大小，它们也会返回图像的实际大小。不幸的是，并非所有浏览器都支持这些属性。
  2. 使用 JS 创建一个新图像，将其设置src为与您正在使用的图像相同，监听其load事件并获取该图像的大小。

像这样的东西：

 (function () {
  var Dom = YAHOO.util.Dom;

  var yui_img = Dom.get('yui_img'),
      new_img = new Image();

  new_img.onload = function () {
    yui_img.width = new_img.width;
    yui_img.height = new_img.height;

    // create the ImageCropper
  };
  new_img.src = yui_img.src;
}());

一个YUI3版本

您可以使用 YUI3 轻松完成所有这些操作：

YUI().use('gallery-imagecropper', function (Y) {

  var img = Y.one('#yui_img');

  img.on('load', function () {
    var cropper = new Y.ImageCroper({
      srcNode: img,
      width: img.get('width'),
      height: img.get('height')
    });
    cropper.render();
  });

});
于 2013-03-06T14:24:03.867 回答
0

代码中的错字。应该

var cropper = new Y.ImageCropper({

你错过了一个字母“p”。

于 2013-03-08T14:10:36.220 回答