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

Question

美好的一天。

我使用脚本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>

结果：

但是，如果我没有指定图像大小，那么我接下来（见图）：

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

结果：

如果我指定错误的图片尺寸，窗口会增加图片的部分：

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

结果：

如何制作标记图片并不一定要指定其大小？

Answer 1

首先，我想指出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. 使用图片的HTML5 naturalWidth和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();
  });

});

Answer 2

代码中的错字。应该是

var cropper = new Y.ImageCropper({

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