README

1. 目的

这是一个PHP类，可以从HTML代码中提取图像标签，并允许将处理后的图像记录在数据库等数据结构中，创建一个抽象层，使用户可以处理其Web应用中的图像。

这样做的主要原因包括 SEO 和节省磁盘空间。

2. 演示

(需要链接)

3. 工作原理

此类旨在用于网站的客户端和服务器端。

• 服务器端
  • 在服务器端，此类应处理处理大量的HTML输入。
    • 处理HTML意味着将有效的HTML图像标签替换为自定义图像标签占位符。此过程在前端进行反转。
    • 处理HTML意味着使用像素度量来调整放大或缩小后的图像大小。
    • 处理HTML意味着下载外部图像，并在必要时按照之前解释的方式调整大小。
    • 处理HTML意味着确保服务器图像目录中没有两个相同的图像，或者不会从其他来源加载。所有图像都是唯一的，如果这些图像存在于图像数据库中，则忽略重复项。
    • 通过处理图像，并将图像与实际内容分离，现在所有图像都可以被操作。
    • 通过在服务器端（未提供）编码CRUD接口，授权用户可以编辑alt属性、标题属性和图像文件名值。这些更改可以存储在数据库中，并在用实际数据替换占位符时在其他地方反映出来。
• 客户端
  • 在前端，此类仅用于将图像占位符替换为其有效的HTML图像标签等效项。

4. 数据结构或数据库

默认情况下，此类包括一个SQL（MySQL）数据库结构，可用于此代码。此文件位于 src/NilPortugues/SEO/ImageHandler/Resources/ImageTable.sql。

无需使用MySQL，可以使用任何其他数据库（PostgreSQL、MariaDB等）或存储系统（Redis、平面文件等）。

通过在一个新类中实现 ImageDataRecordInterface.php 方法来选择您所使用的数据记录技术。使用此接口，您还可以使用ORM而不是SQL。

5. 代码使用

您需要使用的唯一类是\NilPortugues\SEO\ImageHandler\ImageHandler，它只有3个公共方法

• getParsedHtml：将带有 标签的HTML转换为 {{IMG}} 标签。将图像保存到数据结构中。如有必要，执行图像缩放。
• getHtml：将带有 {{IMG}} 标签的 HTML 转换为有效的 标签。如果可用，则用 alt、title、width 和 height 属性填充 标签。
• addImage：将图像添加到记录提取图像的图像数据结构中。

后端

<?php

require 'vendor/autoload.php';

use \NilPortugues\SEO\ImageHandler\Classes\DataRecord\ImageDataRecordPDO as ImageDataRecordPDO;
use \NilPortugues\SEO\ImageHandler\Classes\ImageHTMLParser as ImageHTMLParser;
use \NilPortugues\SEO\ImageHandler\Classes\ImageFileManager as ImageFileManager;
use \NilPortugues\SEO\ImageHandler\Classes\ImageObject as ImageObject;
use \NilPortugues\SEO\ImageHandler\Classes\ImageObjectCollection as ImageObjectCollection;
use \NilPortugues\SEO\ImageHandler\ImageHandler as ImageHandler;

/***********************************************************************
 * Set Up.
 * It's up to you how to inject these values to the class.
 *************************************************************************/
//Set up the database connection
$dns = 'mysql:dbname=sonrisaProject;host=localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$db = new \PDO($dns, $dbUsername, $dbPassword);

//Set up the directory configuration + imageDomain
$baseDir = './';
$downloadDir = 'images/downloaded';
$imageDomainPath = 'http://localhost/ImageHandlerClass';

/***********************************************************************
 * Object creation.
 *************************************************************************/
$idr = ImageDataRecordPDO::getInstance($db);
$ihp = new ImageHTMLParser();
$ifm = new ImageFileManager();
$io = new ImageObject();
$ioc = new ImageObjectCollection();
$imageHandler = new ImageHandler($ihp, $ifm, $io, $ioc, $idr);

//Process data.
$processedHtml = $imageHandler->getParsedHtml($html, $baseDir, $downloadDir);

在幕后，实际上执行的操作是

<!-- $html will be transformed to $processedHtml -->
<img src="http://example.com/path/to/image/directory/external-image.jpg" style="border:2px solid red" data-attribute="example1">

<!-- $processedHtml -->
{{IMG|6fd86da74659f04253285e853af26845|style="border:2px solid red"|data-attribute="example1"}}

前端

实际使用的 PHP 代码如下

<?php

require 'vendor/autoload.php';

use \NilPortugues\SEO\ImageHandler\Classes\DataRecord\ImageDataRecordPDO as ImageDataRecordPDO;
use \NilPortugues\SEO\ImageHandler\Classes\ImageHTMLParser as ImageHTMLParser;
use \NilPortugues\SEO\ImageHandler\Classes\ImageFileManager as ImageFileManager;
use \NilPortugues\SEO\ImageHandler\Classes\ImageObject as ImageObject;
use \NilPortugues\SEO\ImageHandler\Classes\ImageObjectCollection as ImageObjectCollection;
use \NilPortugues\SEO\ImageHandler\ImageHandler as ImageHandler;

/***********************************************************************
 * Object creation.
 *************************************************************************/
$idr = ImageDataRecordPDO::getInstance($db);
$ihp = new ImageHTMLParser();
$ifm = new ImageFileManager();
$io = new ImageObject();
$ioc = new ImageObjectCollection();
$imageHandler = new ImageHandler($ihp, $ifm, $io, $ioc, $idr);

//Retrieve the processed HTML data from a data source. Eg: database

//Rebuild the image tags.
$recoveredHtml = $imageHandler->getHtml($processedHtml, $imageDomainPath);

在幕后，它实际上执行的操作

<!-- $processedHtml will be transformed to $recoveredHtml -->
{{IMG|6fd86da74659f04253285e853af26845|style="border:2px solid red"|data-attribute="example1"}}

<!-- $recoveredHtml -->
<img src="//localhost/ImageHandlerClass/images/downloaded/6fd86da74659f04253285e853af26845.jpg" width="400" height="240" style="border:2px solid red" data-attribute="example1">

图像文件名对于 SEO 来说非常糟糕。这个名称背后的原因是它实际上是文件的 md5 文件哈希。这是用来确保在我们的图像目录中没有图像被覆盖或重复。

如果您担心图像文件名，您应该，您应该在您的应用程序中构建文件重命名，并让 6fd86da74659f04253285e853af26845.jpg 变成您想要的样子以符合您的 SEO 目的。

最后，如果提供了 title 和 alt 属性 - 无论这些是提取的值还是应用程序输入到数据记录行中的 - 当处理 $processedHtml 到 $recoveredHtml 时，类也会创建并填充它们，这对于 SEO 非常好。

作为额外的好处，当重新构建图像标签时，会添加 width 和 height 属性。虽然这样做对 SEO 没有真正的益处，但它将有助于在浏览器中更快地渲染。如果图像被缩小或放大，这些值将与缩放图像的尺寸相匹配。

6. 作者

Nil Portugués Calderó

• contact@nilportugues.com
• http://nilportugues.com