如何使用 JavaScript 在 Web 中显示之前旋转图像

How to Rotate image before displaying in web using JavaScript?

本文关键字：旋转 图像 显示 何使用 JavaScript Web      更新时间：2023-09-26

我只想知道，我可以在网络上显示图像之前检测图像的属性吗？就我而言，我有一千张照片。我想在我的网页上显示它们，但有些照片的方向不同（如横向和纵向）。

我可以在图像显示在我的网页上之前检测到图像的宽度和高度吗？

也许使用JavaScript，例如：

If height>width than rotate
else just display.

有没有JavaScript函数来做到这一点？只是为了获取不显示它的属性。有诀窍吗？

您必须等到加载完毕。

setInterval(function () {
   if(loaded)
   {
      clearInterval(wait);
   }
   else
   {
      log(img.width, 'x', img.height);
   }
}, 0);

我在这里找到了一个例子。

希望对您有所帮助。

页面加载时，您可以控制每个<img/> 

//function rotation
jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};
// When your page is loading
$( window ).load(function() {
    // Each image, you can change selector
    $('img').each(function(){
        if(this.height() < this.width()){ // Size control
            $(this).rotate(90); // rotation function call with the angle in degrees
        }
    });
});
相关文章：