CMS中的图像缩放

Name: Website builder App
Brand: bluetronix
Rating: 4.7 (833 reviews)

了解IMG.pl的内部图像缩放：从本地原始图像到宽度、高度、裁剪、质量和缩放，最后到CMS网站渲染后的成品图像文件。

教程的目标

你将学习如何在CMS网站渲染过程中，bluetronix CMS通过IMG.pl对本地图像进行缩放，调用使用了六个参数，并且为什么浏览器随后只收到已生成的图像文件。

bluetronix CMS具有：

IMG.pl

一项自动缩放和处理图像的核心功能。

IMG.pl在CMS中使用，以便在CMS网站渲染过程中自动裁剪或缩放图像到所需大小。

重要： IMG.pl是bluetronix CMS的内部功能。IMG.pl调用不会作为最终的图像URL交付给用户。

基本原理

在HTML代码中，可以先使用内部的IMG.pl调用。

示例:

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

在CMS网站渲染过程中，此调用将被处理。

CMS会一次性生成相应缩放的图像文件。

随后，原始的IMG.pl调用将被已生成的图像文件名替换。

渲染前的代码

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

渲染后的代码

处理后，HTML代码例如可以这样显示：

<img src="/tmp/img_image_700_500_1_100_1_1070.jpg">

浏览器因此不会接收到原始的IMG.pl调用，而是直接获得已经生成的图像文件。

CMS网站渲染过程中的流程

HTML enthält IMG.pl-Aufruf
      ↓
CMS-Site-Rendering-Prozess
      ↓
IMG.pl wird intern verarbeitet
      ↓
Bild wird skaliert / zugeschnitten
      ↓
neue Bilddatei wird erzeugt
      ↓
IMG.pl-Aufruf wird ersetzt
      ↓
fertiger Bild-Dateiname wird in das HTML eingesetzt
      ↓
fertige HTML-Seite wird ausgeliefert

因此，不需要在每次浏览器调用时重新进行图像缩放。

IMG.pl仅在内部使用

重要： IMG.pl仅供bluetronix CMS内部使用。

IMG.pl不应作为外部图像接口使用或直接通过外部网站调用。

处理是在渲染过程中内部进行的。

外部仅交付已生成的图像文件。

图像必须存在于网络空间中

重要： 所有通过IMG.pl处理的图像必须直接存在于相应bluetronix安装的网络空间内。

外部图像URL不能作为源文件使用。

例如允许使用：

/img/image.jpg

例如不允许使用：

https://external-domain.com/image.jpg

源文件必须在网络空间内可用。

IMG.pl调用的构建

典型的调用如下：

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

参数直接依次排列：

以分隔。

不使用参数名称。

关键仅在于参数的顺序。

参数概览

编号。	参数	含义	示例
1	文件名	Webspace上的源文件路径	`/img/image.jpg`
2	宽度	所需宽度（以像素为单位）	`700`
3	高度	所需高度（以像素为单位）	`500`
4	比例	控制比例缩放或裁剪。	`1`
质量	质量	生成图片文件的质量	`100`
6	缩放	控制是否允许将小图像放大到所需尺寸	`1`

参数1 - 文件名

第一个参数包含源文件的路径.

示例:

/img/image.jpg

在内部，这个参数对应于:

my $f = $help[0];

如果指定的源文件不存在，处理将终止.

注意： 如果没有有效的本地源文件，IMG.pl 无法生成图像.

参数2 - 宽度

第二个参数确定所需的图像宽度（以像素为单位）.

示例:

内部:

my $w = $help[1];

参数3 - 高度

第三个参数确定所需的图像高度（以像素为单位）.

示例:

内部:

my $h = $help[2];

参数4 - 比例

第四个参数控制图像的比例缩放或裁剪.

示例:

内部:

my $p = $help[3];

这可以控制在缩放或裁剪时如何处理图像的原始纵横比.

参数5 - 质量

第五个参数在普通栅格图像中确定生成的图像文件的质量.

示例:

内部:

my $q = $help[4];

通常，此值设置为:

。

参数6 - 缩放

第六个参数控制是否可以放大图像，如果所需输出尺寸大于原始图像.

内部:

my $z = $help[5];

使用:

在需要时放大图像.

示例:

...=700=500=1=100=1

如果未启用缩放，过小的图像将不会按比例放大。剩余区域将用白色边框或背景填充.

包含所有六个参数的示例

/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1

这些值的含义是:

1. /img/image.jpg
   → Quelldatei

2. 700
   → Breite: 700 Pixel

3. 500
   → Höhe: 500 Pixel

4. 1
   → proportionale Verarbeitung / Zuschnitt

5. 100
   → Bildqualität

6. 1
   → Zoom aktiviert

允许的文件类型

IMG.pl 支持以下图像格式:

gif
jpg
jpe
jpeg
png
svg

文件类型	支持
GIF	是
JPG	是
JPE	是
JPEG	是
PNG	是
SVG	是

SVG文件的特殊性

在SVG文件中，第五个参数具有特别的意义。

在常规图像格式如JPG或PNG中是：

my $q = $help[4];

图像质量。

在SVG文件中，该参数则被用作颜色。

注意： $help[4] 技术上是传递的第五个参数，因为内部数组的索引从 0 开始。

因此适用：

JPG / PNG / GIF
Parameter 5
→ Qualität


SVG
Parameter 5
→ Farbe

这样在处理SVG文件时可以设置或替换所需的颜色。

内部参数映射

内部将这六个传递的值如下处理：

my $f = $help[0];  # Dateiname
my $w = $help[1];  # Breite
my $h = $help[2];  # Höhe
my $p = $help[3];  # Proportionalität
my $q = $help[4];  # Qualität / bei SVG: Farbe
my $z = $help[5];  # Zoom

为什么在渲染时会替换IMG.pl？

内部的IMG.pl调用并不是作为永久公共图像URL。

相反，它作为CMS的指令：

Nimm dieses Bild
+
erzeuge diese Größe
+
verwende diese Skalierung
+
verwende diese Qualität
+
berücksichtige die Zoom-Einstellung

结果随后将作为常规图像文件存储。

从：

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

变为：

<img src="/tmp/img_image_700_500_1_100_1_1070.jpg">

浏览器仅接收最终文件。

CMS图像缩放的优势

中央图像缩放提供了多个优点：

einheitliche Bildgrößen
automatischer Bildzuschnitt
keine manuelle Erstellung jeder einzelnen Bildgröße erforderlich
fertige Bilddateien können direkt ausgeliefert werden
IMG.pl muss nicht als öffentliche Bildschnittstelle verwendet werden
die Bildverarbeitung wird zentral vom CMS gesteuert

总结

IMG.pl是bluetronix CMS的中央内部图像缩放功能。

典型的调用如下：

<img src="/CMS/cgi-bin/IMG.pl?/img/image.jpg=700=500=1=100=1">

这六个参数是：

1. Dateiname
2. Breite
3. Höhe
4. Proportionalität
5. Qualität / bei SVG Farbe
6. Zoom

重要的是：

Quelldateien müssen lokal auf dem Webspace liegen.

IMG.pl ist nur für die interne CMS-Verarbeitung vorgesehen.

IMG.pl-Aufrufe werden während des Rendering-Prozesses verarbeitet.

Nach außen wird die fertig erzeugte Bilddatei ausgeliefert.

基本流程如下：

lokales Originalbild
      ↓
IMG.pl
      ↓
Skalierung / Zuschnitt
      ↓
fertige Bilddatei erzeugen
      ↓
IMG.pl-Aufruf im HTML ersetzen
      ↓
fertige Bild-URL an den Browser ausliefern

常见问题

客户常问我们的问题

在bluetronix CMS中，IMG.pl是什么？

IMG.pl 是在CMS站点渲染过程中图像缩放和处理的中央内部功能。

我可以将 IMG.pl 作为公共图像接口使用吗？

不可以。IMG.pl 仅供 bluetronix CMS 内部使用。在渲染后，仅会交付生成的图像文件。

为什么在渲染时要替换 IMG.pl 调用？

CMS 处理指定的缩放参数，生成图像文件，并用生成的文件路径替换 HTML 中的原始调用。因此，浏览器不需要调用内部功能。

源文件可以放在外部服务器上吗？

不可以。原始图像必须直接存在于相应的 bluetronix 安装的 Web 空间上。外部图像 URL 不能用作源文件。

这六个 IMG.pl 参数是如何传递的？

值依次用等号 = 隔开，不需要参数名称。关键在于设定的顺序。

IMG.pl 参数的顺序是什么？

顺序为：文件名、宽度、高度、比例、质量，或在 SVG 中的颜色和缩放。

如果指定的原始图像缺失会发生什么？

如果源文件不存在，IMG.pl 处理将结束，无法生成相应大小的图像文件。

如何设置图像输出的大小？

通过第二和第三个参数，你可以以像素为单位设置宽度和高度。第四个参数影响比例缩放或裁剪。

缩放参数有什么作用？

第六个参数决定是否可以将太小的原始图像放大到所需的输出大小。用 1 激活缩放；未激活缩放的情况下，小图像的剩余区域将填充为白色。

SVG 文件的第五个参数有什么意义？

对于普通的栅格图像如 JPG 或 PNG，第五个参数决定质量。对于 SVG 文件，这个参数用于颜色。

IMG.pl 支持哪些图像格式？

支持 GIF、JPG、JPE、JPEG、PNG 和 SVG 格式。

IMG.pl 处理后的 HTML 是怎样的？

内部调用被生成文件的路径替换。例如 /tmp/img_image_700_500_1_100_1_1070.jpg；具体文件名取决于各自的处理。

每次浏览器调用都必须重新缩放 IMG.pl 吗？

不需要。经过内部处理后，可以直接交付已生成的图像文件。浏览器只获得完成的图像 URL。