Question

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

我使用img src属性值为base64编码图像数据的缩略图（我没有使用href属性来链接到原始图像）

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

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

Answer 1

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

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

$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上旋转图片加载

1 个答案: