Laravel 生成小程序圖文海報最佳方案之一

piglei 發布于2019-07-01 10:50 / 984人閱讀

摘要：微信小程序官方并未提供分享到朋友圈的方法，所以目前基本整個行業都是使用生成圖文海報發到朋友圈，然后識別太陽碼進入到小程序。背景圖片和微信頭像合成后清晰度不夠。

微信小程序官方并未提供分享到朋友圈的方法，所以目前基本整個行業都是使用生成圖文海報發到朋友圈，然后識別太陽碼進入到小程序。

通過谷歌或者百度有很多同學已經提供了一些解決方案，但是在我們使用后效果并不是很理想，主要體現在以下方面：

通過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" 添加iBrandPosterPhantoMmagickServiceProvider::class

圖片保存在 storage/app/public 下所以需要執行 php artisan storage:link

如需自定義配置請執行 php artisan vendor:publish --provider="iBrandPosterPhantoMmagickServiceProvider" --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 iBrandMiniprogramPosterMiniProgramShareImg;
    
$url = "https://www.ibrand.cc/";
$result = MiniProgramShareImg::generateShareImage($url);

返回結果：

    [
        "url"  => "http://xxx.png",   圖片訪問url
        "path" => "path/to/image", 圖片文件路徑
    ]

字體安裝

如果需要實現復雜的字體效果，需要安裝字體，比如在 centos 上就沒有微軟雅黑的字體，所以如果生成的圖片有指定的特殊字體，需要在服務器上進行安裝。

window 將下載的字體文件復制到C:WindowsFonts目錄下或者雙擊字體文件進行安裝

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

討論交流

GPU云服務器云服務器生成小程序小程序生成小程序免費生成免費小程序生成

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/29537.html

微信小程序海報生成踩坑記

摘要：最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。剛開始的思路是這樣的：后臺根據小程序傳過來的參數獲取對應的小程序碼，然后與背景圖合成之后將base64格式的圖片傳給小程...

lidashuang 2019-07-01 10:45 評論0 收藏0
[拆彈時刻]小程序canvas生成海報（二）---優化方案

摘要：注意如果用戶一開始沒有微信授權，生成海報時又必須要用戶頭像不能使用默認的話，那就只能老老實實走之前的流程了。組件名稱終端類型微信版本觸發方法關于的調用方法相冊權限需要你提供保存相冊權限獲取相冊權限成功，給出再次點擊圖片保存到相冊的提示。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海報生成示例海報生成速度緩慢...

LittleLiByte 2019-08-23 17:53 評論0 收藏0
用小程序·云開發打造功能全面的博客小程序丨實戰

摘要：用小程序云開發將博客小程序常用功能一網打盡本文介紹博客小程序的詳情頁的功能按鈕如何實現，具體包括評論點贊收藏和海報功能，這里記錄下整個實現過程和實際編碼中的一些坑。考慮到小程序本身的大小限制，使用的方式是最佳的。用小程序·云開發將博客小程序常用功能一網打盡本文介紹mini博客小程序的詳情頁的功能按鈕如何實現，具體包括評論、點贊、收藏和海報功能，這里記錄下整個實現過程和實際編碼中的一...

cc17 2019-08-30 15:44 評論0 收藏0
用小程序·云開發打造功能全面的博客小程序丨實戰

摘要：用小程序云開發將博客小程序常用功能一網打盡本文介紹博客小程序的詳情頁的功能按鈕如何實現，具體包括評論點贊收藏和海報功能，這里記錄下整個實現過程和實際編碼中的一些坑。考慮到小程序本身的大小限制，使用的方式是最佳的。用小程序·云開發將博客小程序常用功能一網打盡本文介紹mini博客小程序的詳情頁的功能按鈕如何實現，具體包括評論、點贊、收藏和海報功能，這里記錄下整個實現過程和實際編碼中的一...

flybywind 2019-08-26 11:00 評論0 收藏0
Canvas繪圖在微信小程序中的應用:生成個性化海報

摘要：解析進到首頁其實關鍵字在本地就隨機取完了，在首頁中的方法中就通過緩存了要畫的元素，比如關鍵字這里是圖片關鍵字解析語也是圖片畢竟微信小程序的不支持字體等等。一、Canvas應用的背景(個人理解)及基礎語法背景從2012年開始，微信那個時候用戶的積累的量已經非常大了，推出公眾號，當然大屏智能手機在那個時候也流行，傳統的大眾媒體逐步消亡，像微信公眾號這樣的新媒體盛行。企業的廣告投入開始...

vpants 2019-08-23 12:11 評論0 收藏0