創作內容

33 GP

【javascript】強化瀏覽器的圖片檢視器

作者:深海異音│2017-04-23 22:56:12│贊助:2,374│人氣:2463
電腦版瀏覽器檢視圖片的方式實在很陽春,連最基本的拖曳都做不到,所以我寫了個javscript來覆寫瀏覽器預設的圖片檢視器

安裝前請先確定有執行js的瀏覽器套件
【火狐】使用者:必須先安裝【Greasemonkey
【google chrome】使用者:必須先安裝【Tampermonkey


安裝
https://greasyfork.org/zh-CN/scripts/29205-%E5%9C%96%E7%89%87%E7%80%8F%E8%A6%BD%E5%99%A8/code





預覽圖



也可以用來看 隱形圖片





說明:安裝後,瀏覽器開啟圖片就會用此【圖片瀏覽器】來檢視圖片。

  1. 滑鼠滾輪 = 縮放圖片
  2. 放大圖片快速鍵:【+】or【shift】
  3. 縮小圖片快速鍵:【-】or【ctrl】
  4. 當圖片超過視窗範圍,可直接拖曳
  5. 可切換背景為黑色或白色
  6. 左上角的3個按鈕分別為【自動滿版】、【寬度滿版】、【高度滿版】
  7. 直接在視窗左邊顯示size
  8. 如果是很長的圖片,可以按左下角的【x】,就會回到用滑鼠滾輪控制上下的狀態




未來或許可以增加的功能:
  • 縮圖瀏覽,在角落顯示一個縮圖與目前的顯示範圍
  • 旋轉

2017/04/24:修正縮放時會稍微偏移的BUG
2017/04/27:優化拖曳、自動顯示捲軸


引用網址:https://home.gamer.com.tw/TrackBack.php?sn=3554008
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 17 篇留言

萬歲牌DOGE
U質

04-23 23:32

無星之夜
哇 今天才在想這問題

04-24 07:58

藍嵐之k
可以私那個腳腳圖嗎拜託

04-24 16:33

深海異音
http://i.imgur.com/r4aQ7Jc.png04-25 11:10
深海異音
原圖我沒有,我也是在隱形圖片那串裡看到的
04-25 11:11
米普
你好,幾天前在場外看到這個腳本,安裝後使用起來真的很方便,但是想請問是否有辦法可以更改快速鍵,或甚至關閉使用按鍵縮放圖片的功能?

原因有二
第一:本人認為使用滾輪縮放圖片已經很方便了,用不太到按鍵
第二:我習慣使用Ctrl+S儲存圖片,由於預設縮小快速鍵是ctrl,導致我儲存圖片時會一便縮小圖片,頗不方便

啊對了還有,我不小心按到左下角的X,有辦法再次讓他出現嗎?因為重新打開圖片功能還是沒跑出來
除此之外,其他功能都非常棒!謝謝你免費為大家創造出這麼多如此方便的工具!

06-23 17:46

深海異音
按X關閉圖片是為了方便瀏覽很長的圖片,像是漫畫之類的,要回去很簡單,在點一下圖片就行了
06-23 20:22
深海異音
關閉快速鍵的方法:
1.進到程式碼裡面
2.把【currKey = e.keyCode || e.which || e.charCode;】這行註解掉,前面加上【//】即可(大約在783行附近)
http://i.imgur.com/uV7Uh3M.jpg06-23 20:32
米普
謝謝!但我不明白「再點一下圖片」是什麼意思
點擊圖片只能縮放圖片沒有功能列出現
關閉重開也是一樣無腳本狀態

06-23 22:17

深海異音
圖片網址我研究看看。
理論上重新整理(F5)後,是一定會回到有功能列的初始狀態,除非網址結尾不是圖片的附檔名,或是圖片載入出現異常06-23 22:21
深海異音
除了圖片網址,也順便說一下你的瀏覽器06-23 22:25
米普
與其說是網址,不如說是整個網頁的圖片都沒有腳本功能
問題網頁:aqua.komica.org/12/
我發現只要是 aqua.komica.org 網域下的圖片都沒有腳本功能
如 aqua.komica.org/42/ 、 aqua.komica.org/23/
這些網頁裡的流覽圖片腳本皆失效

瀏覽器:Google Chrome,版本 58.0.3029.110 (64-bit)

06-23 22:35

深海異音
圖片網址,例如
http://aqua.komica.org/42/src/1498119167331.jpg06-23 22:53
深海異音
aqua.komica.org/23/
這個是那個討論區的網址,他點圖片上面的編號才會檢視圖片,只點圖片的話他是放大圖片,而不是開啟圖片網址
這是k島本身的設計
06-23 22:58
深海異音
還是說已經確定進入圖片網址了,但是腳本沒觸發?
是的話單獨把圖片網址貼給我
我測試你給的網址,討論區裡面的圖片進去後都有正常觸發腳本06-23 23:01
米普
抱歉一直洗板;我確定進入圖片網址(包括你上面那張圖片),腳本依然沒處發
...我想我直接重新安裝,是不是比較快?
啊對,除了你上面的取消快捷鍵功能,我沒有更動過任何腳本內容

06-23 23:04

深海異音
那倒是沒差,反正也沒什麼人留言...
不過你還是重裝好了,因為我這邊測試起來沒什麼問題的說[e8]
只要網址結尾是jpg、png、gif,腳本就會被觸發
重裝後還是不行,就點F12,把錯誤訊息截圖給我看06-23 23:11
米普
啊...我發現原因了
原來是腳本衝突
雖然明明都是腳本運行的網址
綜合可以但是歡樂惡搞、四格、GIF都不行?!
真是怪了
衝突腳本:https://greasyfork.org/en/scripts/28383-komica-ngid

自己測試了一下
在歡樂惡搞(http://aqua.komica.org/12/index.htm)
NGID(衝突的腳本)開啟時,圖片檢視器失效
NGID關閉時,圖片檢視器能確實運作
所以確定是衝突導致的

感謝你一直耐心幫我解決問題
雖然問題是出在我自己身上...

06-23 23:24

深海異音
既然確定是腳本衝突,那就檢視圖片時不要觸發會衝突的腳本
http://i.imgur.com/VUZMkRa.png06-23 23:41
深海異音
//避免圖片也啟用腳本
var s_url = location.href.substring(location.href.length-3,location.href.length).toLowerCase();
if(s_url=="jpg"||s_url=="png"||s_url=="gif"){
return;
}
06-23 23:42
深海異音
把這拖語法貼在那個Komica NGID腳本的最上面(位置參考我那張圖片),簡單來說就是網址結尾是jpg或png或gif時,離開腳本,這樣下面的東東就不會執行06-23 23:46
米普
加了你那段,問題就解決了,好厲害!!!
謝謝!!!

06-23 23:55


作者你好,發現一個小問題
// @include *.jpge
這邊把jpeg打成jpge了

07-17 01:18

深海異音
對耶...
改好了07-17 01:44
貝果-Just HatsuneMiku
圖片瀏覽器在火狐57用Tampermonkey開好像有些問題
左邊的那條bar消失了

09-30 01:00

深海異音
能截圖嗎09-30 01:16
貝果-Just HatsuneMiku
我發現剛剛是因為我開到另一個暗色附加所以讓按鈕變得看不到QQ

不過這張圖沒有觸發檢視器
是正常的嗎
http://i.imgur.com/VUZMkRa.png

09-30 01:19

深海異音
我是設定成jpg,png,gif結尾的網址,並且確定那是一張【圖片】而不是【網頁】,才會觸發09-30 08:19
玄暗烏黛墨縲黑黓焦皂
這個腳本真的超好用!有時候用別人電腦都會忘記原生瀏覽器沒有這個功能@@"
另外,我想請問大大是否可以增加判斷網頁內容只有一張圖的功能?像是這樣:
https://imgur.com/a/0Cwe3mx
因為有的網址根本沒有副檔名結尾,例如這個XD
https://avatars3.githubusercontent.com/u/12185698?s=460&v=4

11-01 01:30

深海異音
當初是怕影響效率才沒有設計成所有網頁都執行腳本,不過我也沒有實際測試過就是了11-01 01:33
玄暗烏黛墨縲黑黓焦皂
那能不能做個開關讓使用者自行決定是否開啟?如果效率會差也是使用者自己決定開啟的(笑

11-01 01:37

深海異音
也不是不能,只是使用者要從原始碼來改,因為腳本要套用到哪些網址,是一開始就宣告在腳本上面的,而不是js的語法11-01 01:39
深海異音
我再思考看看怎麼做,或是直接做成瀏覽器的附加元件也說不定11-01 01:44
玄暗烏黛墨縲黑黓焦皂
嗯嗯,感謝大大回覆 :)

11-01 01:45

玄暗烏黛墨縲黑黓焦皂
大大我又來了。

不曉得可不可以添加以 document.contentType 判斷,來讓相當多服務的圖片也可以套用你做的圖片瀏覽器呢?(這個東西真的太好用了,希望能讓它更廣用)
稍早我試了直接加 include *,沒想到原本製作腳本的就能應付了,不過...

1. GitHub 的服務似乎沒辦法正常套用。
2. 如果沒有做 iframe 的排除判斷的話,巴哈的簽名檔也會被套用XDD

除此之外,我沒有發現其他問題。

希望大大論文趕出來後有空時可以加上這個功能,感激不盡!

06-06 04:06

深海異音
原來這麼簡單就能判斷了,感謝提供。
這個是很早之前寫的,雖然想要整個重寫,不過這東西實在是有點傷腦筋,
這個是當初用tiefsee(aeropic)一部分程式碼改出來的,那時候沒有刻意封裝成獨立物件,所以tiefsee後來加入的功能都沒能轉移到這個腳本06-06 16:11
深海異音
我的想法是這樣,直接把這東西封裝成一個js函式庫,任何網站只要嵌入了這個js就能有圖片顯示器的功能,然後讓這個腳本基於那個圖片顯示器的函式庫來運行,這樣子才不會同樣的程式碼一直重複修改06-06 16:18
玄暗烏黛墨縲黑黓焦皂
專業,這樣就能偷偷更新了(?

靜待更新[e16]

06-06 21:57

我要留言提醒:您尚未登入,請先登入再留言

33喜歡★hbl917070 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:線上製作【隱形圖片】(1... 後一篇:圖片轉像素圖(表格版)【...

追蹤私訊

作品資料夾

TonyChange未來的女朋友
出來 窩想見你看更多我要大聲說昨天17:03


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】