我想在灯箱显示图像时检测 EXIF 旋转信息并应用 CSS 进行旋转。
我使用带有 base64 编码图像数据的 img src 属性值的缩略图(我没有使用 href 属性链接到原始图像)
我没有使用服务器端代码的选项。
最好在渲染之前发生。 lightbox2 中是否有 onPreShow 或 onLoad 等事件?
最佳答案
我必须修改 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) {
...
});
关于javascript - 在 lightbox2 加载时旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46849513/