小程序实现页面转图片

要实现一个小程序页面转图片的需求,类似于用户编辑了一些内容,上传了一些头像,然后生成几十张图片,供用户下载转发及生成pdf等等,实验了以下方案:

1.wxml2canvas

微信提供的解决方案,写起来很麻烦,页面样式还有好多不支持,pass

2.webview+html2canvas

在小程序里通过webview打开一个外部页面,然后在外部页面使用html2canvas插件生成图片,这种方式操作简单,生成的图片效果也不错。然而有一个问题,用户没有打开编辑,而是系统自动生成的页面,类似于目录页,要怎么生成图片呢,于是转用第三种方案

3.小程序发送请求到后端接口,后端通过puphpeteer直接打开页面并生成图片。

puphpeteer是一个Puppeteer与PHP的桥接,支持完整的API,常用来做爬虫,这个库和pyppeteer的区别是他是通过php来连接puppeteer,也就是依然需要node.js和puppeteer环境,而python版本的pyppeteer是纯python重写的,本身并不需要安装node.js。

composer require nesk/puphpeteer
npm install @nesk/puphpeteer

安装成功后

require_once('vendor/autoload.php');
use Nesk\Puphpeteer\Puppeteer;
$puppeteer = new Puppeteer();
$browser = $puppeteer->launch();
$page = $browser->newPage();
$page->setViewport(['width' => 1200, 'height' => 2133,'deviceScaleFactor' => 2]);
$page->goto('http://www.baidu.com');
$page->screenshot(['path' => 'example.png']); 
$browser->close();

setViewport可以设置截图宽高和清晰度 

在实际使用过程中,可能由于使用各种echart图表或者延迟渲染,导致生成出来的图片空白,可以使用

$page->waitForSelector('#title');

或者

$page->waitFor(1000);

等到页面渲染完成后再进行截图操作

最后把生成的图片上传阿里云oss并保存返回图片地址

如果在本地测试通过,在linux服务器上报错无法调用相关服务,基本都是权限问题,保持程序用户的一致或者给于node文件夹相关权限。如果出现汉字乱码问题,可以安装中文字体库。

 

posted @   HaruSuzumiya  阅读(3055)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示