[問題處理] 如何順利瀏覽網頁上面旋轉90度的圖片

很多時候，找答案並不是一件”線性”的事情。

所謂的”線性”，是指可以像看課本一樣，看完某個章節，就可以解後面的習題。

大部分的狀況，我們的生活問題，都不是”線性”的，只是十幾年的”標準答案式”填鴨教育，讓我們錯認為是”線性”的。

問題

2024-03-15 星期五

有時候，我們會進去網頁上面瀏覽圖片或圖庫，大量圖片那種。

但有些狀況，會讓人難以閱讀。特別是當幾百張圖都特意旋轉90度時。

這有可能是上傳的人搞錯了，或者是有技術問題造成等。總之，整個網頁的圖檔都是旋轉90度。

該如何解決?

其實這個問題也困擾獻慶很久了，只是之前沒有認真去思考如何解決。

尋找解決方案1(過去版)

解決方案百百種，就看你喜歡哪種。

以下有很多方式，獻慶早期都試過。效果不一。

頭部實際轉90度看

這招看起來很好笑，但事實上，是非常有效的方式。特別是圖片張數少的時候。

直接頭轉90度看，馬上可以解決這個問題。

只是當圖片超過幾張後，就會開始困擾了。就看你頸部什麼時候會開始酸。

以獻慶的經驗，10張圖後，就想把電腦扔了。

腦部轉90度看

這招也不錯，但考驗大腦的圖像處理能力。

不否認，這世界有這類”天才”。

但獻慶的大腦就難以處理這種狀況，沒幾張圖，大腦就會”超載”，進入當機狀況。

電腦螢幕實際轉90度看

這個主意不錯，也是很可行的方案。

現在的電腦，有些螢幕是支援轉90度。也許方便克服這個問題。不過有些螢幕是指支援某個方向的90度(順時鐘或逆時鐘)，如果圖的90度，不是螢幕的90度，那就”冏”了，這樣一轉，反而產生180度的轉向，更難看。難到要倒立去看嗎!

就算運氣好，螢幕支援的轉向跟圖片相同，也得面對滑鼠操作方向轉了90度。這下我們得將滑鼠轉90度來用，才不會錯亂。又是另一個操作考驗，而我們不是ID4裡面的威爾史密斯。

(這可不是演電影，電影”ID4”裡面，威爾史密斯操作外星飛船時，當他操作飛船向前開時，飛船反而向後撞到牆壁。於是他將提示紙條撕下來，反轉180度再貼上去。全部都用習慣的反方向操作飛船，於是正常操作飛船前進。)

筆電實際轉90度看

這個也很直接，把筆電90度立起來看。反正大部分筆電的邊緣都是相對平整，可以直接旋轉90度，立在桌面上看。如果覺得角度不漂亮，那可以找些支撐，把筆電調到想要的角度，方便頭部去看。

不過也是老問題，滑鼠操作方向轉了90度。

使用Windows裡面的顯示設定，調整螢幕顯示方向

使用Windows裡面的顯示設定，調整螢幕顯示方向。這樣就不用物理調整，螢幕或筆電方向。

不過也是老問題，滑鼠操作方向轉了90度。

尋找解決方案2(今天版) (2024-03-15)

獻慶在思考，如果看幾張圖也就算了，轉轉頭、轉轉螢幕、轉轉電腦，這幾招效果都不錯。

但如果圖片張數，數百張、甚至數千張哩，那就”冏”了。

得尋找更好的解決方案。

獻慶想到，如果瀏覽圖檔的網頁瀏覽器可以處理這個問題，會不會有幫助?

於是開始不線性也不順利的解決方案之旅。

瀏覽器本身有支援畫面旋轉90度

網路有資料說，有些瀏覽器有支援畫面旋轉90度，進去修改設定就可以達到目的。也提供了Google Chrome瀏覽器的設定方式。

但獻慶剛試過，目前使用的Google Chrome (版本 122.0.6261.113)，沒有看到這個設定，冏。

看起來是新版本的已經沒這個設定了。(或者是設定改地方了，獻慶找5分鐘沒找到。)

直接”被放棄”這個選項。

Google Chrome瀏覽器的擴充功能有支援圖片旋轉90度

網路有資料說，可靠擴充功能(外掛)，來旋轉圖片。

例如: 使用”Enhanced Image Viewer”

但經過測試，這種方式一次只有旋轉一張，而且每張圖都需要手動操作。

看上百張圖片時，就冏了。

至於有沒有其他擴充功能可以自動旋轉所有圖片，獻慶找5分鐘沒找看到相對應的名稱。就放棄了。

在Chrome中輸入代碼 (說明不明)

有網路資料說。

在Chrome中，按ctrl+shift+j打開控制台。

輸入以下代碼:

document.body.style.transform = "rotate(90deg)";

看完後，自己試著操作看看。

在Chrome中，按ctrl+shift+j打開控制台。這句話等同在Chrome中，按F12，即可打開控制台。這個獻慶以前玩過，只是不曉得要幹嘛。

接著第2部分，輸入代碼。獻慶馬上卡住，要去哪裡輸入?

資料中也沒什麼其他的說明了。

目前沒感覺，放棄。

REF:
CSDN: 谷歌浏览器将网页翻转90度

修改HTML跟CSS設定 (似乎是網頁開發人用)

有網路資料說。修改HTML跟CSS設定，可達到此目的。

但這看起來是，網頁開發人員，在開發端的幹的事情。

而不是我們使用者在瀏覽器這邊幹的事情。

查詢方向可能錯誤。

REF:
Stack Overflow: Rotate all html element (whole page) 90 degree with CSS?

製作一個書籤(bookmark)，並使用一段程式碼 (沒看懂)

有網路資料說。製作一個書籤(bookmark)，並使用一段程式碼。

反正整段文字，獻慶都沒看懂，怎麼製作書籤? 怎麼使用程式碼? 冏。

就放著吧!

原文資料:

If you don’t want an extension for that, and don’t mind wacky behavior with all images on a web page, you can use the following bookmarklet script by creating a bookmark and using the script below as address:

javascript:(function(){for(i=0;i<document.images.length;i++)document.images[i].style.webkitTransform='rotate(90deg)';})()

On SuperUser, it rotates all avatar pictures (not the logo though, as it works differently). You might need it in two variants though, 90deg and 270deg, since repeatedly pressing the bookmarklet won’t have any effect.

REF:
Stack Exchange: Any chrome extension which rotates image on a page? [closed]

自己猜答案

網路上看到的這幾個方案，又看了幾次，還是沒感覺。

那就亂試。

1. 在瀏覽器網址列，貼上程式碼。無效。很明顯的耍白癡行為，但還是幹了。
2. 使用F12可以打開控制台，看看內容，有HTML跟CSS資料，但又改不動。畢竟來源碼是在伺服器端，用戶端這邊是沒有權限的。

沒感覺了，就放棄了。去搞其他工作，這個就放著。

喝杯咖啡，做作其他研發項目。

無聊時，又回來看一下F12打開後的畫面內容。

看到底端有一個”Console”的欄位。

這個可有趣了，這不是跑程式輸入指令的那個畫面嘛。該不會是要把程式碼貼在這裡輸入吧!

來試試看!

第一次貼碼時，Chrome還警告非專業人員請勿亂貼程式碼，可能會造成不明原因問題。要輸入程式碼前，請輸入”通關密語”(通關密碼，Chrome已經直接寫在上面了，只是要人自己輸入，確定狀況。這可能是針對”小白”設計的安全措施，但對獻慶這種”老白”，老是在白癡，就沒差了。)

獻慶輸入完”通關密語”後，開始測試之路。

程式碼百百種，要輸入啥，還真不知道。那就拿之前查過的幾個碼來試。輸入完後，自己嚇到自己了，網頁畫面竟然有變化。

輸入以下代碼:

document.body.style.transform = "rotate(90deg)";

效果是整個網頁旋轉90度。只是這樣的效果，不是想要的。而且有時候會遭遇到”黑屏”，畫面整片黑。

輸入以下代碼:

javascript:(function(){for(i=0;i<document.images.length;i++)document.images[i].style.webkitTransform='rotate(90deg)';})()

效果是每張圖旋轉90度。讚! 這就是想要的功能。找到了!

感想

1. 生活就是這樣囉! 小問題，就得自己找答案。當然，過程都不是線性的，不是課本看一節，就會解題那種。
   生活問題是包羅萬象，沒有”標準答案”，也並非使用單一方式解決。要有耐心處理，但是不行時就放棄，避免空轉在同一個狀況。

2. 這次資料的內容跟說明，可能都怪怪的。沒能直接讓人操作完成。
   能找到解法，純屬運氣。當然，要敢去嘗試錯誤，接受失敗。接受找不到解法，放棄。

3. 這個解問題，為什麼要寫Po文。
   以專家的角度來說，這就不是什麼問題。就輸入個碼而已。(會這樣講，很大程度上是因為你看過答案了)
   但在生活中，面對問題時，我們永遠不是哪個方面的專家，也永遠不只到哪個是我們的答案。

   “我們是人，不是全能的神!”
   “We are humans, not the Mighty GOD!”

   如何”撐”過去?
   靠的就是”非典型”、”非線性”的方式，去嘗試尋找”自己的解法”，儘管是”彎彎曲曲”，儘管路上的人也一直”報錯路”!

4. 問題的解法，沒有”標準答案”，請找到”自己的答案”!

相關連結

Chrome瀏覽器F12網頁開發工具教學
使用F12可以打開控制台(其實應該叫做”網頁開發工具”)。問題解決完後，去查才知道的。