我在使用wkhtmltoimage工具時(shí)，發(fā)現(xiàn)使用同樣的HTML生成的圖片的渲染和瀏覽器上渲染出來的效果不一樣
這是使用瀏覽器渲染出來的樣子
這是使用wkhtmltoimage工具作成的圖片
在我調(diào)查原因之后，發(fā)現(xiàn)HTML渲染出來的效果不一樣是因?yàn)閣khtmltoimage工具和我使用的瀏覽器引擎是不一樣的，wkhtmltoimage用來呈現(xiàn)Html內(nèi)容的引擎是（WebKit），而我使用的瀏覽器用來呈現(xiàn)Html內(nèi)容的引擎是（Blink），而盡管 WebKit 和 Blink 都有一些 Web 標(biāo)準(zhǔn)，但它們是兩個(gè)不同的渲染引擎，可能在處理某些 HTML 和 CSS 特性上有一些不同。
所以在這里我使用的解決方法是放棄使用wkhtmltoimage來將Html轉(zhuǎn)為圖片，使用其他的工具，這里我換的工具是puppeteer，puppeteer工具使用的引擎是Blink引擎，這和我使用的瀏覽器用來呈現(xiàn)Html內(nèi)容的引擎一致，所以我嘗試更換工具來作成圖片。
這是我更換工具后使用相同的HTML結(jié)構(gòu)做出的圖片
接下來我會(huì)整理出來如何安裝puppeteer工具，并使用它
1.安裝nodejs和npm
Puppeteer是一個(gè) Node.js 庫(kù)，因此Puppeteer需要依賴于nodejs
首先執(zhí)行安裝nodejs
apt-get install nodejs
安裝npm
apt-get install npm
安裝完成之后執(zhí)行nodejs -v和npm -v，確認(rèn)是否安裝成功
使用npm安裝Puppeteer工具
npm install puppeteer
安裝wget，因?yàn)樾枰褂脀get在系統(tǒng)內(nèi)安裝google瀏覽器，puppeteer 是一個(gè)基于 Chrome的工具，用于控制、操縱和測(cè)試瀏覽器。
apt-get install wget
安裝gnupg，它是一個(gè)用于提供加密和簽名的開源工具套件，當(dāng)添加新的軟件源時(shí)，系統(tǒng)通常要求通過簽名來驗(yàn)證軟件包的真實(shí)性，所以需要gnupg確保下載并安裝的軟件包是由正確的發(fā)布方簽名的。
apt-get install gnupg
安裝google套件
wget -q -O -https://dl-ssl.google.com/linux/linux_signing_key.pub| apt-key add - \
&& sh -c 'echo "deb [arch=amd64]http://dl.google.com/linux/chrome/deb/stable main" >> /etc/apt/sources.list.d/google.list' \
&& apt-get update && apt-get install -y google-chrome-stable
其中，https://dl-ssl.google.com/linux/linux_signing_key.pub是Google Chrome 的簽名密鑰文件，用于驗(yàn)證下載軟件包的完整性和真實(shí)性。
http://dl.google.com/linux/chrome/deb/是Google Chrome 的 Debian 軟件包的存儲(chǔ)庫(kù)地址，包含了 Google Chrome 的二進(jìn)制軟件包，軟件包存儲(chǔ)庫(kù)地址則指定了軟件包的位置。
當(dāng)執(zhí)行了以上命令，在執(zhí)行apt-get install -y google-chrome-stable命令后就會(huì)從http://dl.google.com/linux/chrome/deb/下下載并安裝google瀏覽器。
到這里配置方面的工作就完成了，接下來我來介紹如何使用這個(gè)工具
在這里我使用了browsershot庫(kù)
https://github.com/spatie/browsershot
安裝browsershot
composer require spatie/browsershot
在代碼中引入
use Spatie\Browsershot\Browsershot;
使用Browsershot庫(kù)將HTML轉(zhuǎn)為圖片
Browsershot::html($dom)->setOption('args', ['--disable-setuid-sandbox','--font-render-hinting=medium'])->setScreenshotType('jpeg')->setNodeBinary(env('NODE_PATH', '/usr/bin/node'))->setNpmBinary(env('NPM_PATH', '/usr/bin/npm'))->setChromePath(env('CHROME_PATH', '/usr/bin/google-chrome-stable'))->windowSize(2500, 843)->delay(2000)->quality(80)->save($path);
在這里我解釋一下以上代碼的作用
Browsershot::html($dom)表示使用HTML結(jié)構(gòu)來生成圖片，$dom為HTML變量
->setOption('args', ['--disable-setuid-sandbox','--font-render-hinting=medium'])? 這其中‘--disable-setuid-sandbox’是為了禁用google瀏覽器的沙箱模式，Chrome 的沙箱是為了提高安全性而設(shè)計(jì)的，但在容器中運(yùn)行時(shí)，可能會(huì)導(dǎo)致權(quán)限問題，所以我們可以通過禁用沙箱，可以繞過這些問題?！?-font-render-hinting=medium’為了設(shè)置字體呈現(xiàn)的提示級(jí)別為中等。這個(gè)參數(shù)用于控制字體的渲染方式。
->setScreenshotType('jpeg')? 設(shè)置截圖的類型為 JPEG 格式。
->setNodeBinary(env('NODE_PATH', '/usr/bin/node'))? 設(shè)置Node.js路徑
->setNpmBinary(env('NPM_PATH', '/usr/bin/npm'))? 設(shè)置npm路徑
->setChromePath(env('CHROME_PATH', '/usr/bin/google-chrome-stable'))? 設(shè)置Chrome 瀏覽器的二進(jìn)制文件路徑。
->windowSize(2500, 843)? 設(shè)置截圖的像素寬高比例。
->delay(2000)? 表示在生成圖片時(shí)延遲兩秒的時(shí)間，因?yàn)槲以阡秩綡TML時(shí)使用了部分字體文件，這部分字體文件較大所以渲染慢，在這里我在生成截圖時(shí)延遲兩秒，避免在字體還未渲染完成就生成圖片。
->quality(80)? 設(shè)置JPEG 圖片的質(zhì)量。
->save($path)? 將最終的截圖保存到指定路徑。
