加載lightbox2時旋轉圖像

Question

我想在燈箱顯示圖像時檢測EXIF旋轉信息，然后將CSS應用於旋轉。

我將縮略圖與base64編碼圖像數據的img src屬性值一起使用（我不使用href屬性鏈接到原始圖像）

我沒有使用服務器端代碼的選項。

最好是在渲染之前發生。 lightbox2中是否有類似onPreShow或onLoad的事件？

Answer 1

我必須在Lightbox.prototype.changeImage函數中修改preloader.onload處理程序。

我在此代碼之前添加了方向檢測代碼：

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

如果圖像方向為橫向， imgWidth 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) {
             ...
       });