iT邦幫忙

1

網頁前端 Canvas2Image 截圖範圍超過螢幕高度,請問如何處理?

這問題已找到解決方式:

請參考 : https://ithelp.ithome.com.tw/questions/10201425


您好
網頁前端使用 Canvas2Image 截圖, 截圖的範圍是紅框DIV, 紅框內是圖文內容,紅框範圍超過螢幕高度,截圖結果是:在視窗外的圖文是空白, 現在只能利用瀏覽器縮放來截圖,
請問還有其他方式嗎?
抓取網頁圖文只能抓取螢幕可視範圍嗎?

先謝謝您的回覆!
https://ithelp.ithome.com.tw/upload/images/20201026/20107808KqdLSz5Rx4.jpg

補充圖一 :
螢幕解析度是1600x900 , 網頁操作後 , 跳出一DIV紅框區域 750x1900px,
紅框的部分內容跑出瀏覽器外,要把畫面縮小,讓所有內容出現在畫面上,再進行Canvas2Image 截圖的動作.

https://ithelp.ithome.com.tw/upload/images/20201026/20107808UEDpbK3UqE.jpg

https://www.archi.net.tw/

canvas不是可以在瀏覽器端按右鍵→另存圖片嗎?
webtest iT邦新手 5 級 ‧ 2020-10-26 14:14:33 檢舉
japhenchen 您好
網頁截圖功能是為了取紅框內的內容及線上簽名, 前端可下載png 及ajax圖檔上傳到Server,補上 : 補充圖一 .

1 個回答

0

這需要了解你的行為模式。

正常截圖超過對應的範圍,沒有圖的部份是空白這是正常的。
一般這是有故意性的情況下才會這樣做。

否則你只能用程式計算現有高寬來做自動載圖。
畢竟大多數載圖來說,大多是手動的。很少會發生這樣的情況。
手動的情況下本身就有其限制的範圍存在。

如果要設計成自動的,就得先對目前的寬高來處理。

看更多先前的回應...收起先前的回應...
webtest iT邦新手 5 級 ‧ 2020-10-26 14:16:22 檢舉

您好
這紅框區域內容多,格式需直式.

網頁截圖功能是為了取紅框內的內容及線上簽名, 前端可下載png 及ajax圖檔上傳到Server,補上 : 補充圖一 .

抱歉,你後來補的圖跟說明。
換我看不懂你要的東西了。

能否將你的問題再說清楚一點。

webtest iT邦新手 5 級 ‧ 2020-10-26 16:16:34 檢舉

您好
這是測試網頁 :

點選畫面左邊選單按鈕 > 直接 [詳細規格清單] > 跳出DIV畫面 >
卷軸往下 > 可點選 [轉成圖片] 及 [下載圖片] > 這圖檔會有空白

重新再操作一次 > 點選畫面左邊選單按鈕 > 瀏覽器的縮放 縮小 > [轉成圖片] 及 [下載圖片]
這次PNG 會是所有內容

(網址刪除)

謝謝!

這部份我是明白。重點是你的需求是什麼?
我目前不明白的是這點。

是不想要縮小就能自動截全部的圖還是什麼?
然後是自動定義截圖還是手動調整截圖?

其實認真來說。截圖也得看你的指定元件是什麼。
一般body的截圖,是需要調整捲軸來分段截圖再做結合處理的。
我推測這是你想要的。

webtest iT邦新手 5 級 ‧ 2020-10-26 17:07:02 檢舉

您好
謝謝您的回覆.

希望不做瀏覽器縮小動作或不做調整捲軸分段截圖的狀況下,能一次完成截圖.

這抓取網頁局部圖文只能抓取螢幕可視範圍嗎?

通靈亡 iT邦研究生 3 級 ‧ 2020-10-26 20:57:30 檢舉

嗯,我映像中是不行的。因為截畫面的截圖原理是利用了可視範圍為主的重繪生成動作。
通靈王給的那段連結你可以研究一下。
畢竟當初我客戶的要求是能截圖就好。捲軸動也沒關係。
反正捲軸動完還是會回來原來的位置。
能不能不動捲軸就能截畫面外的圖。我倒是沒研究下去了。

webtest iT邦新手 5 級 ‧ 2020-10-27 08:25:39 檢舉

謝謝 "通靈亡" 及 "浩瀚星空" !

kikulu iT邦研究生 4 級 ‧ 2020-10-27 14:44:16 檢舉

如果只是View和簽名,直接產生一張PNG給他簽?

webtest iT邦新手 5 級 ‧ 2020-10-27 17:09:24 檢舉

kikulu 您好
這是測試頁 , 或許實際操作過後會明瞭 , 謝謝!

你這種的只能用捲軸來處理。
畢竟你是需要包含html渲染出來的畫面截圖。
只能靠可視範圍來截。

另一招就是借用pdf的招式了。
pdf有可以將html碼自行渲染畫面直接產生圖。
不過之前用過效果不是很好就是了。太過特殊的css不吃。

webtest iT邦新手 5 級 ‧ 2020-10-27 20:51:50 檢舉

浩瀚星空您好
"借用pdf的招式了"
突然想到用"列印" (另存為PDF),可惜PDF無法擷取"簽名"的欄位.

請問有html轉PDF有JS外掛嗎?(剛剛google中)
謝謝!

webtest iT邦新手 5 級 ‧ 2020-10-27 20:55:19 檢舉

浩瀚星空您好
"用捲軸來處理",這更是超過我的能力,爬文要關鍵字是?
謝謝!

通靈亡給你的連結就有範例了啊?
照著他做就好了。

我要發表回答

立即登入回答