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

piglei 发布于2019-07-01 10:50 / 939人阅读

摘要：微信小程序官方并未提供分享到朋友圈的方法，所以目前基本整个行业都是使用生成图文海报发到朋友圈，然后识别太阳码进入到小程序。背景图片和微信头像合成后清晰度不够。

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

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

通过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云服务器生成小程序小程序生成小程序免费生成免费小程序生成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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