這問題已找到解決方式:
請參考 : https://ithelp.ithome.com.tw/questions/10201425
您好
網頁前端使用 Canvas2Image 截圖, 截圖的範圍是紅框DIV, 紅框內是圖文內容,紅框範圍超過螢幕高度,截圖結果是:在視窗外的圖文是空白, 現在只能利用瀏覽器縮放來截圖,
請問還有其他方式嗎?
抓取網頁圖文只能抓取螢幕可視範圍嗎?
先謝謝您的回覆!
補充圖一 :
螢幕解析度是1600x900 , 網頁操作後 , 跳出一DIV紅框區域 750x1900px,
紅框的部分內容跑出瀏覽器外,要把畫面縮小,讓所有內容出現在畫面上,再進行Canvas2Image 截圖的動作.
已邀請的邦友 {{ invite_list.length }}/5
這需要了解你的行為模式。
正常截圖超過對應的範圍，沒有圖的部份是空白這是正常的。
一般這是有故意性的情況下才會這樣做。
否則你只能用程式計算現有高寬來做自動載圖。
畢竟大多數載圖來說，大多是手動的。很少會發生這樣的情況。
手動的情況下本身就有其限制的範圍存在。
如果要設計成自動的，就得先對目前的寬高來處理。
您好
這紅框區域內容多,格式需直式.
網頁截圖功能是為了取紅框內的內容及線上簽名, 前端可下載png 及ajax圖檔上傳到Server,補上 : 補充圖一 .
抱歉，你後來補的圖跟說明。
換我看不懂你要的東西了。
能否將你的問題再說清楚一點。
您好
這是測試網頁 :
點選畫面左邊選單按鈕 > 直接 [詳細規格清單] > 跳出DIV畫面 >
卷軸往下 > 可點選 [轉成圖片] 及 [下載圖片] > 這圖檔會有空白
重新再操作一次 > 點選畫面左邊選單按鈕 > 瀏覽器的縮放 縮小 > [轉成圖片] 及 [下載圖片]
這次PNG 會是所有內容
(網址刪除)
謝謝!
這部份我是明白。重點是你的需求是什麼?
我目前不明白的是這點。
是不想要縮小就能自動截全部的圖還是什麼?
然後是自動定義截圖還是手動調整截圖?
其實認真來說。截圖也得看你的指定元件是什麼。
一般body的截圖，是需要調整捲軸來分段截圖再做結合處理的。
我推測這是你想要的。
您好
謝謝您的回覆.
希望不做瀏覽器縮小動作或不做調整捲軸分段截圖的狀況下,能一次完成截圖.
這抓取網頁局部圖文只能抓取螢幕可視範圍嗎?
嗯，我映像中是不行的。因為截畫面的截圖原理是利用了可視範圍為主的重繪生成動作。
通靈王給的那段連結你可以研究一下。
畢竟當初我客戶的要求是能截圖就好。捲軸動也沒關係。
反正捲軸動完還是會回來原來的位置。
能不能不動捲軸就能截畫面外的圖。我倒是沒研究下去了。
謝謝 "通靈亡" 及 "浩瀚星空" !
如果只是View和簽名,直接產生一張PNG給他簽?
kikulu 您好
這是測試頁 , 或許實際操作過後會明瞭 , 謝謝!
你這種的只能用捲軸來處理。
畢竟你是需要包含html渲染出來的畫面截圖。
只能靠可視範圍來截。
另一招就是借用pdf的招式了。
pdf有可以將html碼自行渲染畫面直接產生圖。
不過之前用過效果不是很好就是了。太過特殊的css不吃。
iThome鐵人賽
看影片追技術