Laravel 生成小程式圖文海報最佳方案之一
微信小程式官方並未提供分享到朋友圈的方法,所以目前基本整個行業都是使用生成圖文海報發到朋友圈,然後識別太陽碼進入到小程式。
通過谷歌或者百度有很多同學已經提供了一些解決方案,但是在我們使用後效果並不是很理想,主要體現在以下方面:
- 通過PHP寫入的字型效果並不理想。
- 背景圖片和微信頭像合成後清晰度不夠。
- 無法實現一些複雜的效果。
- 實現過程也較複雜。
最終我們找了一種認為非常合理的實現方式,就是基於 PhantomJS 實現,通過 PhantomJS 隱形瀏覽器截圖的功能來生成海報。
PhantomJS是一個基於webkit的JavaScript API。它使用QtWebKit作為它核心瀏覽器的功能,使用webkit來編譯解釋執行JavaScript程式碼。任何你可以在基於webkit瀏覽器做的事情,它都能做到。它不僅是個隱形的瀏覽器,提供了諸如CSS選擇器、支援Web標準、DOM操作、JSON、HTML5、Canvas、SVG等,同時也提供了處理檔案I/O的操作,從而使你可以向作業系統讀寫檔案等。PhantomJS的用處可謂非常廣泛,諸如網路監測、網頁截圖、無需瀏覽器的 Web 測試、頁面訪問自動化等。
有以下優點:
- 基於html可實現複雜的文字,圖片,陰影效果。
- 清晰度和檔案大小合理
- 使用簡單、即插即用
包地址:laravel-miniprogram-poster 求 star : )
體驗
掃碼進入商品詳情頁分享生成圖文體驗
安裝
composer require ibrand/laravel-miniprogram-poster
低於 Laravel5.5 版本,
config/app.php
檔案中 'providers' 新增iBrand\Poster\PhantoMmagickServiceProvider::class
圖片儲存在
storage/app/public
php artisan storage:link
如需自定義配置請執行
php artisan vendor:publish --provider="iBrand\Poster\PhantoMmagickServiceProvider" --tag="config"
配置項
return [ //圖片儲存位置 'disks' => [ 'MiniProgramShare' => [ 'driver' => 'local', 'root' => storage_path('app/public/share'), 'url' => env('APP_URL') . '/storage/share', 'visibility' => 'public', ], ], //圖片寬度 'width' => '575px', //放大倍數 'zoomfactor' => 1.5, //0-100,100質量最高 'quality' => 100, //是否壓縮圖片 'compress' => true, ];
使用
use iBrand\Miniprogram\Poster\MiniProgramShareImg;
$url = 'https://www.ibrand.cc/';
$result = MiniProgramShareImg::generateShareImage($url);
返回結果:
[
'url' => 'http://xxx.png', 圖片訪問url
'path' => 'path/to/image', 圖片檔案路徑
]
字型安裝
如果需要實現複雜的字型效果,需要安裝字型,比如在 centos 上就沒有微軟雅黑的字型,所以如果生成的圖片有指定的特殊字型,需要在伺服器上進行安裝。
- window 將下載的字型檔案複製到C:Windows\Fonts目錄下或者雙擊字型檔案進行安裝
- mac 下載的字型檔案 雙擊字型檔案進行安裝
- centos
# 安裝微軟雅黑
wget -P /tmp/ https://iyoyo.oss-cn-hangzhou.aliyuncs.com/mirror/fonts/msyh.ttf
wget -P /tmp/ https://iyoyo.oss-cn-hangzhou.aliyuncs.com/mirror/fonts/msyhbd.ttf
wget -P /tmp/ https://iyoyo.oss-cn-hangzhou.aliyuncs.com/mirror/fonts/msyhl.ttf
cd /usr/share/fonts/lyx/
mkdir chinese
cd chinese
mv /tmp/msyhbd.ttf ./
chmod 755 *.ttf
yum -y install mkfontscale
mkfontscale
mkfontdir
fc-cache -fv
Resource
專案基於PhantomMagick