WHtml2png

(async) new WHtml2png(widthopt, heightopt, scaleopt, htmlopt, optopt) → {Promise}

Description:

• 呼叫Chromium轉Html為png圖

  提供兩種瀏覽器使用模式(opt.mode): 'single'為每次呼叫啟動新瀏覽器, 出圖後即關閉釋放, Node行程可自然結束, 適合排程批次; 'alive'為常駐瀏覽器, 第一次呼叫時啟動, 同行程後續呼叫重用故出圖較快, 閒置超過1小時自動關閉, 批次腳本結束前可呼叫WHtml2png.close()主動關閉常駐瀏覽器, 使Node行程可立即退出

  未指定opt.executablePath時使用套件自帶之免安裝chrome, 該chrome由安裝時(postinstall)自GitHub下載切割zip分片合併解壓而來, 位於套件chrome/目錄; 若因npm封鎖scripts致postinstall未執行, 則於首次調用時自動重新下載

Source:

• WHtml2png.mjs, line 836

Example

async function testa() {

    let html = `
<div style="padding:10px; display:inline-block;">
    <div style="background-color: rgb(255, 255, 255); border-radius: 5px; width: 600px; box-shadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);">
        <div style="padding: 20px; border-bottom: 1px solid rgb(221, 221, 221); background-color: rgb(250, 250, 250); border-radius: 5px 5px 0px 0px; display: flex; justify-content: flex-start; align-items: center;">
            <div>
                <div style="font-size: 2rem;">Panel Title</div>
            </div>
        </div>
        <div style="border-radius: 0px;">
            <div style="padding: 20px;">
                Here is a panel content, Morbi mattis ullamcorper velit. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. In ut quam vitae odio lacinia tincidunt.
            </div>
        </div>
        <div style="padding: 20px; border-top: 1px solid rgb(221, 221, 221); background-color: rgb(250, 250, 250); border-radius: 0px 0px 5px 5px;">
            Here is a panel footer
        </div>
    </div>
</div>
    `
    let width = 620
    let height = 235
    let scale = 3

    let b64 = await WHtml2png(width, height, scale, html)
    // console.log('b64', b64)

    // fs.writeFileSync('./test-scla.b64', b64, 'utf8')
    fs.writeFileSync('./test-scla.png', b64, { encoding: 'base64' })

    console.log('finish')
}
testa()
    .catch((err) => {
        console.log(err)
    })

Parameters:

Name	Type	Attributes	Default	Description
width	Number	<optional>	700	輸入圖片原始寬度數字，單位px，預設700
height	Number	<optional>	400	輸入圖片原始高度數字，單位px，預設400
scale	Number	<optional>	3	輸入欲將圖片放大比例數字，單位px，預設3
html	String	<optional>	''	輸入HTML字串，預設''
opt	Object	<optional>	{}	輸入設定物件，預設{} Properties Name Type Attributes Default Description mode String <optional> 'single' 輸入瀏覽器使用模式字串，'single'代表每次呼叫啟閉瀏覽器，'alive'代表常駐瀏覽器供同行程重用，預設'single' executablePath String <optional> '' 輸入瀏覽器執行檔路徑字串，可指定本機安裝Chrome或playwright託管chromium等，未給則使用套件自帶之免安裝chrome(無檔案時自動下載)；注意alive模式之常駐瀏覽器由同行程第一次呼叫決定執行檔，欲切換須先呼叫WHtml2png.close()，預設'' stylesHead Array <optional> [] 輸入引用css程式碼網址陣列，預設[] scriptsHead Array <optional> [] 輸入引用js程式碼網址陣列，預設[] execJsHead String | Array <optional> '' 輸入插入head內執行js程式碼字串或陣列，預設'' execJsPost String | Array <optional> '' 輸入於dom末插入執行js程式碼字串或陣列，預設'' funGetUrl function <optional> null 輸入轉換goto所使用本機網址(fpHtml)成為url之函數，預設null funPageWait function <optional> null 輸入前端瀏覽器內偵測等待完成之函數，可用window或document等，回傳true則代表渲染完成可進行截圖，預設null retry Integer <optional> 3 輸入失敗重試次數整數，預設3 writeError Boolean <optional> false 輸入是否輸出錯誤訊息至檔案布林值，預設false fdHtml String <optional> './_convertTemp' 輸入臨時儲存繪圖用html檔之資料夾位置字串，僅設定opt.funGetUrl時會產生html暫存檔，預設'./_convertTemp' fdErr String <optional> './_convertTemp' 輸入臨時儲存錯誤檔之資料夾位置字串，預設'./_convertTemp'

Returns:

Type

Promise