Laravel 生成小程序图文海报最佳方案之一

微信小程序官方并未提供分享到朋友圈的方法,所以目前基本整个行业都是使用生成图文海报发到朋友圈,然后识别太阳码进入到小程序。

通过谷歌或者百度有很多同学已经提供了一些解决方案,但是在我们使用后效果并不是很理想,主要体现在以下方面:

  1. 通过PHP写入的字体效果并不理想。
  2. 背景图片和微信头像合成后清晰度不够。
  3. 无法实现一些复杂的效果。
  4. 实现过程也较复杂。

最终我们找了一种认为非常合理的实现方式,就是基于 PhantomJS 实现,通过 PhantomJS 隐形浏览器截图的功能来生成海报。

PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情,它都能做到。它不仅是个隐形的浏览器,提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等,同时也提供了处理文件I/O的操作,从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛,诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。

有以下优点:

  1. 基于html可实现复杂的文字,图片,阴影效果。
  2. 清晰度和文件大小合理
  3. 使用简单、即插即用

包地址:laravel-miniprogram-poster 求 star : )

体验

扫码进入商品详情页分享生成图文体验

iBrand开源体验店

安装

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
公众号:前程序员陈彼得
本帖由系统于 5年前 自动加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 10

我们是用 canvas 画出来的 :smile:

5年前 评论

@我叫张大熊 之前我们也用过 canvas 方案,最蛋疼的是每个客户的要求都不一样,花式要求。

现在只要确定设计稿,然后切图做成 html 就行啦,还是简单不少。

5年前 评论

@shjchen 我们就一种比较简单 前端就直接处理里 :smile_cat:

5年前 评论

请问配置项写在哪个文件呢? 我执行了 php artisan vendor:publish --provider="iBrand\Poster\PhantoMmagickServiceProvider" --tag="config" 没什么反应

5年前 评论
_jue 3年前

用浏览器渲染截图确实简单很多 用gd库合成图片很酸爽

5年前 评论
qbhy

大声告诉我,生成一个图片要几秒

5年前 评论

纯生成截图使用chrome headless 模式更方便,chrome 59版开始提供的功能,就因为chrome发布无界面模式的支持,PhantomJS已经停止更新了。 配合chrome-remote-interface 使用效果更佳。
https://developers.google.com/web/updates/...

linux 下有中文乱码问题 可以安装相关字体包。
以Ubuntu 为例:
sudo apt-get install language-pack-zh
sudo apt-get install chinese

5年前 评论

@JerryYe 我试试,看看哪个更合适点

5年前 评论

phantomjs没有装,
装上就好了,
不过发现巨卡

mac 报错

ErrorException (E_WARNING)
getimagesize(  storage/app/public/share/20190101/5ebc214b99d489cfb53fccd238d07ded.png): failed to open stream: No such file or directory
Converter {#379 ▼
  #driver: "local"
  #acl: "private"
  #filesystem: null
  #tempFilePath: "/var/tmp//12958630335c2b5908438b1.png"
  #source: "https://www.ibrand.cc/"
  #pages: []
  #binary: "/Users/xiongyongxin/Sites/xiaochengxu/vendor/anam/phantomjs-linux-x86-binary/bin/phantomjs"
  #alternateBinary: "/Users/xiongyongxin/Sites/xiaochengxu/vendor/anam/phantomjs-linux-x86-binary/bin/phantomjs"
  #command: "/Users/xiongyongxin/Sites/xiaochengxu/vendor/anam/phantomjs-linux-x86-binary/bin/phantomjs --ssl-protocol=any --ignore-ssl-errors=yes '/Users/xiongyongxin/Sites ▶"
}
5年前 评论

有那款插件生成海报的吗?现在小程序写的生成海报。超级慢。有些手机更本就加载不出来。

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!