在 lightbox2 加载时旋转图像

Question

我想在灯箱显示图像时检测 EXIF 旋转信息并应用 CSS 进行旋转。

我使用带有 base64 编码图像数据的 img src 属性值的缩略图（我没有使用 link 原始图像的 href 属性）

我没有使用服务器端代码的选项。

最好在渲染之前发生。 lightbox2 中是否有 onPreShow 或 onLoad 等事件？

Answer 1

我不得不修改 Lightbox.prototype.changeImage 函数中的 preloader.onload 处理程序。

我在这段代码之前添加了方向检测代码：

$image.width(preloader.width);
$image.height(preloader.height);

imgHeight 和 imgWidth 被交换，如果图像方向是横向，我的代码中会添加 css。

      $preloader = $(preloader);
      var imgHeight = preloader.height;
      var imgWidth = preloader.width;

      EXIF.getData(preloader, function() {

          var rotation = EXIF.getTag(this, "Orientation");
          if (rotation == 6 || rotation == 8) {
              var css = exif2css(rotation);
              if (css.transform) {
                  $image[0].style.transform = css.transform;
              }
              if (css['transform-origin']) {
                  $image[0].style['transform-origin'] = css['transform-origin'];
              }
              console.log("rotate");
              var tmp = imgHeight;
              imgHeight = imgWidth;
              imgWidth = tmp;
          } else {
              //clear css
              $image[0].style.transform = "";
              $image[0].style['transform-origin'] = "";
          }


          $image.width(imgWidth);
          $image.height(imgHeight);

          if (self.options.fitImagesInViewport) {
             ...
       });

在 lightbox2 加载时旋转图像

Rotate image on lightbox2 load

javascript

css

events

image

lightbox2