[討論] 圖片嵌入網頁中

看板Web_Design作者 (沾沾喜氣)時間13年前 (2011/06/28 22:58), 編輯推噓15(15推 0噓 21→)
留言36則, 18人參與, 最新討論串1/1
常常寫網頁寫程式 寫到悶時 就會拿些有趣又簡單的東西來玩 平常要顯示圖片就 <img src="http::xxx.jpg" /> 簡單到不行 那今天我想要不用圖片檔 就讓單純的網頁顯示出圖片 我的作法是將每一個pixel存入CSS檔中 網頁載入時再拼成一張圖 這作法就像是ptt常見的文字圖 ▃▃▆█ <--舉例 但是這作法會產生一個問題 就是檔案會變非常大 XD 而且發現到原來現在的web browser根本不能處理大量的div （看來browser還有進步的空間） 不知道有沒有更好的解法 如果browser可以處理 或許就可以用javascript控制每一個div 詳細部份可能直接看檔案會比較清楚 http://www.mediafire.com/?1s6m6lwawm8woqp 實際測試ie8大約顯示五分之一就罷工了 fx4可以完整顯示但需要一些時間 ps.電腦不太好的不要輕易嘗試，因為處理很久會造成類似當機的情況^^ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 111.242.14.95
→
06/29 00:16, , 1F
每一個pixel存入css檔，用圖片？還是背景色？
06/29 00:16, 1F
→
06/29 00:17, , 2F
我不敢開你的檔案XD 請問大概有幾個DIV?
06/29 00:17, 2F
檔案中的轉換的原始圖片是 202*205=41410 http://i.imgur.com/J29r5.png
推
06/29 01:09, , 3F
好像很好玩 :p
06/29 01:09, 3F
推
06/29 01:31, , 4F
06/29 01:31, 4F
→
06/29 01:32, , 5F
如果像這種，用html碼控制字體顏色，再把字都換成方塊勒?
06/29 01:32, 5F
→
06/29 01:33, , 6F
改用table的話很早就有人做出來了
06/29 01:33, 6F
以上兩種作法如果可以解決pixel之間的縫隙 那就完美了 有開檔案來看的人 應該可以發現跟一般圖片沒什麼差別
推
06/29 01:36, , 7F
好有趣XDDD
06/29 01:36, 7F
而且這樣顯示圖片 可讓所有圖片機器人與搜尋引擎無法分辨圖片 因為根本沒有圖片檔 新增20*20的檔案 http://www.mediafire.com/?313wi66wpl7b59d 裡面包含原始圖檔 ※ 編輯: k900 來自: 111.242.14.95 (06/29 08:54)
→
06/29 09:14, , 8F
不知道有沒有人想要挑戰極限 fullHD 1920*1080
06/29 09:14, 8F
→
06/29 09:18, , 9F
如果4萬pixel可以在2秒內開啟 可以站內信給我想要測試的圖檔
06/29 09:18, 9F
推
06/29 13:48, , 10F
開出來後，顯示的效果還挺不錯的阿!不過真的開很久..
06/29 13:48, 10F
推
06/29 14:27, , 11F
我的意思是，你是用Div背景色組成他嗎？
06/29 14:27, 11F
推
06/29 14:29, , 12F
我開了檔案，我懂了，蠻有趣的XD
06/29 14:29, 12F
推
06/29 14:31, , 13F
放大看也很像點陣圖
06/29 14:31, 13F
推
06/29 18:00, , 14F
不用圖檔 可以考慮改用 data: URI 速度應該較快
06/29 18:00, 14F
→
06/29 18:33, , 15F
Data URI 這方法還不錯
06/29 18:33, 15F
推
06/29 19:10, , 16F
線上版給大家玩玩 沒做cache 晚一點就拿下來
06/29 19:10, 16F
→
06/29 19:10, , 17F
06/29 19:10, 17F
→
06/29 19:10, , 18F
建議使用 Chrome 服用
06/29 19:10, 18F
→
06/29 20:25, , 19F
樓上GJ完全了解我的意思 用javascript控制後應用層面會很廣
06/29 20:25, 19F
→
06/29 20:30, , 20F
剛稍微優化了一次 :)
06/29 20:30, 20F
→
06/29 20:59, , 21F
日本人有寫出把點陣圖轉成CSS加TABLE顯示的程式
06/29 20:59, 21F
推
06/29 21:13, , 22F
好有趣，在我的電腦上，Opera開起來最快
06/29 21:13, 22F
推
06/29 21:45, , 23F
好棒喔！好好玩！
06/29 21:45, 23F
→
06/29 22:24, , 24F
把圖的面積上限加到50w, 900x400 的圖開起來頗吃力了 XD
06/29 22:24, 24F
→
06/29 22:25, , 25F
image width 900px, height 400px, use 303043 divs.
06/29 22:25, 25F
推
06/30 02:36, , 26F
之前有跟別人討論過用這招來做智慧型手機的網頁手寫功能
06/30 02:36, 26F
推
06/30 09:20, , 27F
要傳輸的容量比圖片還大 不太實用
06/30 09:20, 27F
→
06/30 14:24, , 28F
直接用 canvas render ？
06/30 14:24, 28F
→
06/30 18:08, , 29F
推有意思的玩法... :D 效率和空間應該還是Data URI scheme
06/30 18:08, 29F
→
06/30 18:11, , 30F
canvas也是先利用data URI來存，再利用img轉會比data array
06/30 18:11, 30F
→
06/30 18:11, , 31F
省空間... (居然按到3...^^!! 待會補推... orz)
06/30 18:11, 31F
推
06/30 18:14, , 32F
補堆... ^^!
06/30 18:14, 32F
推
06/30 21:28, , 33F
有意思~ XD
06/30 21:28, 33F
→
06/30 21:30, , 34F
同1色碼，使用同1class效果更好，另外可以考慮編列索引色
06/30 21:30, 34F
→
06/30 21:31, , 35F
類似gif的作法...只不過 都還是很慢就是了~"~
06/30 21:31, 35F
→
07/07 13:32, , 36F
雖然好玩但不太實用，因為這就回歸bmp了
07/07 13:32, 36F
‣ 更多 k900 的文章
文章代碼(AID): #1E2UlyF2 (Web_Design)