如何在Symfony 3中使用SnappyBundle(wkhtmltoimage)创建网站的屏幕截图

本文概述

• 要求
• 1)安装和配置SnappyBundle
• 2)例子

谢天谢地, 创建屏幕快照并不是开发人员经常执行的任务, 但是知道如何创建屏幕快照可能对你的开发知识有所帮助。在这种情况下, 要在Symfony 3中创建网站的屏幕截图, 我们将使用wkhtmltoimage和KnpSnappyBundle(用PHP编写的wkhtmltoimage控制台命令包装)。

wkhtmltopdf和wkhtmltoimage是使用Qt WebKit渲染引擎将HTML渲染为PDF和各种图像格式的开源命令行工具, 它们完全”无头”运行, 并且不需要显示或显示服务。

要求

你将需要wkhtmltoimage在系统中可用并且在命令提示符下可访问。 wkhtmltoimage是使用Qt WebKit渲染引擎将HTML渲染为PDF和各种图像格式的命令行工具。它们完全”无头运行”, 不需要显示或显示服务。

• Windows：你可以在安装区域中下载每种体系结构(x86和x64)的安装程序。尽管你稍后可以在config.yml文件中更改wkhtmltoimage可执行文件的路径, 但是建议将wkhtmltoimage用作系统上的环境变量(如果你不想为wkhtmltopdf创建环境变量, 则可以提供可执行文件的完整路径)。你可以在本文中阅读如何在Windows中创建环境变量。
• Debian / Ubuntu：你可以使用以下命令直接在控制台中从wkhtmltopdf安装发行版：

$ sudo apt-get install wkhtmltopdf

在此处访问wkhtmltopdf和wkhtmltoimage的主页以获取更多信息。

1)安装和配置SnappyBundle

Snappy本身是wkhtmltopdf和wkhtmltoimage转换实用程序的PHP(5.3+)包装器。它允许你使用Webkit引擎从html文档或网站生成pdf或图像文件。 KnpSnappyBundle为你的Symfony项目提供了简单的集成。

要在你的项目中安装SnappyBundle, 请执行以下composer命令：

composer require knplabs/knp-snappy-bundle

或手动添加将软件包名称添加到你的composer.json文件中, 然后执行composer install：

{
    "require": {
        "knplabs/knp-snappy-bundle": "~1.4"
    }
}

下载完成后, 启用捆绑软件, 将以下行添加到你的内核中：

$bundles = [
    //..//
    new Knp\Bundle\SnappyBundle\KnpSnappyBundle(), ];

最后, 你只需要在config.yml文件中添加基本配置, 即可提供并启用wkhtmltoimage的二进制路径。

请注意, 如前所述, SnappyBundle需要使用wkhtmltoimage才能工作, 因此在使用config.yml的二进制选项之前, 我们需要提供wkhtmltoimage可执行文件的完整路径, 否则你将面临最著名的错误之一：

Windows中的二进制路径

使用wkhtmltopdf的默认安装程序(和默认安装设置), 主分区的程序文件中应该有一个文件夹wkhtmltopdf / bin, 其中包含wkhtmltopdf的可执行文件(包括wkhtmltoimage), 因此你只需要提供以下路径：下面的例子。

但是, 如果你使用的是自定义安装, 则只需使用二进制文件中包含wkhtmltoimage可执行文件的新文件更改路径即可。

# Windows configuration
knp_snappy:
    image:
        enabled:    true
        binary:     "\"C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltoimage.exe\""
        options:    []

Linux / Unix中的二进制路径, 例如

如果使用apt-get方法安装了wkhtmltopdf, 则路径可能是：

# app/config/config.yml
knp_snappy:
    image:
        enabled:    true
        binary:     /usr/local/bin/wkhtmltoimage
        options:    []

如何更改屏幕截图生成设置

你可以在config.yml文件中默认更改设置：

# config.yml
knp_snappy:
    image:
        enabled:    true
        binary:     "wkhtmltoimage"
        options:    
            width: 1920
            height: 1080

或者使用PHP和snappy的setOption方法在控制器(或服务等)中进行动态分析：

<?php 

$snappyImage = $this->get('knp_snappy.image');

$snappyImage->setOption('height', 1080);
$snappyImage->setOption('width', 1920);
$snappyImage->setOption('quality', 100);
$snappyImage->setOption('disable-javascript', false);
//$snappyImage->setOption('crop-x', 0);
//$snappyImage->setOption('crop-y', 0);

2)例子

将网站的屏幕快照保存在存储中

默认情况下, snappy为你提供一种轻松生成图像的方法, 并且图像将作为generate方法的第二个参数保存在路径Providen中：

<?php

namespace sandboxBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;

class DefaultController extends Controller
{
    public function indexAction()
    {
        // Get snappy.image service
        $imageGenerator = $this->get('knp_snappy.image');
        
        $filepath = 'imagehd.jpg';//or filename.png
        
        // Set dimensions of the output image
        $imageGenerator->setOption('width', 1920);
        $imageGenerator->setOption('height', 1080);
        
        // Take a screenshot of Our Code World website !
        $imageGenerator->generate('http://www.ourcodeworld.com', $filepath);
        
        return new Response("Image succesfully created in ".$filepath);
    }
}

在控制器中生成文件下载

要将图像作为附件返回, 请使用具有作为附件处置的BinaryFileResponse：

<?php

namespace sandboxBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use Symfony\Component\HttpFoundation\ResponseHeaderBag;

class DefaultController extends Controller
{
    public function indexAction()
    {
        // Get snappy.image service
        $imageGenerator = $this->get('knp_snappy.image');
        
        $filepath = 'imagehd.jpg';//or image.png
        
        // Set dimensions of the output image
        $imageGenerator->setOption('width', 1920);
        $imageGenerator->setOption('height', 1080);
        
        // Take a screenshot of Our Code World website !
        $imageGenerator->generate('http://www.ourcodeworld.com', $filepath);
        
        $response = new BinaryFileResponse($filepath);
        $response->setContentDisposition(ResponseHeaderBag::DISPOSITION_ATTACHMENT);

        return $response;
    }
}

在控制器中返回图像作为响应

要返回图像作为响应, 请使用具有内联处置的BinaryFileResponse：

<?php

namespace sandboxBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use Symfony\Component\HttpFoundation\ResponseHeaderBag;

class DefaultController extends Controller
{
    public function indexAction()
    {
        // Get snappy.image service
        $imageGenerator = $this->get('knp_snappy.image');
        
        $filepath = 'imagehd.jpg';
        
        // Set dimensions of the output image
        $imageGenerator->setOption('width', 1920);
        $imageGenerator->setOption('height', 1080);
        
        // Take a screenshot of Our Code World website !
        $imageGenerator->generate('http://www.ourcodeworld.com', $filepath);
        
        $response = new BinaryFileResponse($filepath);
        $response->setContentDisposition(ResponseHeaderBag::DISPOSITION_INLINE);

        return $response;
    }
}

玩得开心 ！