ImageProcessing.html 14.2 KB
Newer Older
1
2
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

3
<div style="display:none;">
4
5
6
    <div class="t3js-imageProcessing-twinImage-template">
        <div class="t3-install-displaytwinimageimages t3js-imageProcessing-images" style="display:none;">
            <div class="row">
7
                <div class="col-12 col-md-6">
8
9
10
11
12
                    <h4>Reference</h4>
                    <div class="bg-transparent-emulation">
                        <img class="reference"/>
                    </div>
                </div>
13
                <div class="col-12 col-md-6">
14
15
16
17
18
19
20
21
22
23
24
                    <h4>Your system</h4>
                    <div class="bg-transparent-emulation">
                        <img class="result"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="t3-install-displaytwinimagetextarea t3js-imageProcessing-command" style="display:none;">
            <pre><code class="language-bash t3js-imageProcessing-command-text"></code></pre>
        </div>
    </div>
25
26
27
</div>

<h3>True type font tests</h3>
28
<f:be.infobox title="FreeType2 hint" state="-1">
29
    <p>If the two images below do not look the same, please check your FreeType 2 module.</p>
30
</f:be.infobox>
31
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingTrueType"></div>
32
33
34
35
<hr>

<h3>Convert image formats to jpg</h3>
<p>
36
37
38
39
40
    This verifies that your ImageMagick installation is able to read the default
    formats <code>jpg</code>, <code>gif</code>, <code>png</code>, <code>tif</code>, <code>pdf</code> and
    <code>ai</code>.
    The tool <code>identify</code> is used to read the pixeldimensions of non-web formats and 'convert' is used to
    read the image and convert it to <code>jpg</code>.
41
</p>
42
<f:be.infobox title="Dark images" state="-1">
43
44
    <p>
        In case the images appear remarkably darker than the reference images,
45
        try to set<br/> <code>$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_colorspace'] = sRGB</code>.
46
    </p>
47
48
</f:be.infobox>

49
<h4>Read jpg</h4>
50
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadJpg"></div>
51

52
<h4>Read gif</h4>
53
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadGif"></div>
54

55
<h4>Read png</h4>
56
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadPng"></div>
57

58
<h4>Read tif</h4>
59
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadTif"></div>
60

61
<h4>Read pdf</h4>
62
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadPdf"></div>
63

64
<h4>Read ai</h4>
65
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingReadAi"></div>
66
67
<hr>

68
<h3>Writing gif, png, webp</h3>
69
<p>
70
    This verifies that ImageMagick is able to write GIF and PNG and WEBP files.
71
    The GIF-file is attempted compressed by the
72
    <code>\TYPO3\CMS\Core\Imaging\GraphicalFunctions::gifCompress()</code> function.
73
74
</p>
<h4>Write gif</h4>
75
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingWriteGif"></div>
76
<h4>Write png</h4>
77
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingWritePng"></div>
78
79
<h4>Write webp</h4>
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingWriteWebp"></div>
80
81
82
83
<hr>

<h3>Scaling images</h3>
<p>
84
    This shows how ImageMagick reacts when scaling transparent GIF and PNG files.
85
86
</p>
<h4>gif to gif</h4>
87
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGifToGif"></div>
88
<h4>png to png</h4>
89
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingPngToPng"></div>
90
<h4>gif to jpg</h4>
91
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGifToJpg"></div>
92
93
<h4>jpg to webp</h4>
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingJpgToWebp"></div>
94
95
96
97
<hr>

<h3>Combining images</h3>
<p>
98
99
    This verifies that the ImageMagick tools, <code>combine</code>, <code>composite</code>, are able to
    combine two images through a grayscale mask.
100
101
</p>
<h4>Combine using a GIF mask with only black and white</h4>
102
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingCombineGifMask"></div>
103
<h4>Combine using a JPG mask with graylevels</h4>
104
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingCombineJpgMask"></div>
105
106
107
108
<hr>

<h3>GDlib</h3>
<p>
109
    This verifies that the GDLib installation works properly.
110
111
</p>
<h4>Create simple image</h4>
112
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibSimple"></div>
113

114
<h4>Create image from file</h4>
115
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibFromFile"></div>
116

117
<h4>Render text with TrueType font</h4>
118
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibRenderText"></div>
119

120
<h4>Render text with TrueType font using 'niceText' option</h4>
121
<f:be.infobox title="Note on 'niceText'" state="-1">
122
123
124
125
126
    <p>
        'niceText' is a concept that tries to improve the antialiasing of the rendered type by actually
        rendering the textstring in double size on a black/white mask, downscaling the mask and masking
        the text onto the image through this mask. This involves ImageMagick 'combine'/'composite' and 'convert'.
    </p>
127
</f:be.infobox>
128
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibNiceText"></div>
129

130
<h4>Render 'niceText' with a shadow under</h4>
131
<f:be.infobox title="Note on 'shadow'" state="-1">
132
133
134
135
136
    <p>
        This test makes sense only if the above test had a correct output. But if so, you may not see
        a soft dropshadow from the third text string as you should. In that case you are most likely using
        ImageMagick 5 and should set the flag <code>$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_effects']</code>.
    </p>
137
</f:be.infobox>
138
<div class="t3js-imageProcessing-twinContainer" data-test="imageProcessingGdlibNiceTextShadow"></div>
139
140
141
<hr>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
142
143
144
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingConfiguration">
            <h4 class="panel-title">
145
                <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseConfiguration" aria-expanded="true" aria-controls="collapseFive" class="collapsed">
146
147
148
149
150
151
152
                    <span class="caret"></span>
                    Current configuration
                </a>
            </h4>
        </div>
        <div id="collapseConfiguration" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingConfiguration">
            <div class="panel-body">
153

154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
                <table class="table table-striped">
                    <tr>
                        <td>{imageProcessingProcessor} enabled:</td>
                        <td>{f:if(condition:imageProcessingEnabled, then:'Yes', else:'No')}</td>
                    </tr>
                    <tr>
                        <td>ImageMagick or GraphicsMagick:</td>
                        <td>{imageProcessingProcessor}</td>
                    </tr>
                    <tr>
                        <td>{imageProcessingProcessor} path:</td>
                        <td>{imageProcessingPath}</td>
                    </tr>
                    <tr>
                        <td>{imageProcessingProcessor} version:</td>
                        <td>{imageProcessingVersion}</td>
                    </tr>
                    <tr>
                        <td>{imageProcessingProcessor} effects enabled:</td>
                        <td>{imageProcessingEffects} <span>(Blurring/Sharpening with {imageProcessingProcessor})</span></td>
                    </tr>
                    <tr>
                        <td>GDLib enabled:</td>
                        <td>{f:if(condition:imageProcessingGdlibEnabled, then:'Yes', else:'No')}</td>
                    </tr>
                    <tr>
                        <td>GDLib using PNG:</td>
                        <td>{f:if(condition:imageProcessingGdlibPng, then:'Yes', else:'No')}</td>
                    </tr>
                    <tr>
                        <td>File Formats:</td>
                        <td>{imageProcessingFileFormats}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
191

192
193
194
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingVerify">
            <h4 class="panel-title">
195
                <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseVerify" aria-expanded="true" aria-controls="collapseFive" class="collapsed">
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
                    <span class="caret"></span>
                    Verify test results
                </a>
            </h4>
        </div>
        <div id="collapseVerify" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingVerify">
            <div class="panel-body">
                <h4>Verify test results</h4>
                <p>
                    This page performs image processing and displays the result. It's a thorough check
                    that everything you've configured is working correctly.
                </p>
                <p>
                    It's quite simple to verify your installation; Just look down the page, the images
                    in pairs should look like each other. If some images are not alike, something is
                    wrong. You may also notice warnings and errors if this tool found signs of any problems.
                </p>
                <p>
                    The image to the left is the reference image (how it should be) and to the right
                    the image made by your server.
                </p>
            </div>
        </div>
    </div>
220

221
222
223
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingAbout">
            <h4 class="panel-title">
224
                <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseAbout" aria-expanded="true" aria-controls="collapseFive" class="collapsed">
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
                    <span class="caret"></span>
                    About image handling
                </a>
            </h4>
        </div>
        <div id="collapseAbout" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAbout">
            <div class="panel-body">
                <p>
                    TYPO3 is known for its ability to process images on the server.
                </p>
                <p>
                    In the backend interface (TBE) thumbnails are automatically generated
                    as well as icons, menu items and pane tabs (by GDLib).
                    In the frontend all kinds of graphical elements are processed. Typically images are
                    scaled down to fit the pages (by ImageMagick) and menu items, graphical headers and
                    such are generated automatically (by GDLib + ImageMagick). In addition TYPO3 is able
                    to handle many file formats (thanks to ImageMagick), for example TIF, BMP, PCX, TGA,
                    AI and PDF in addition to the standard web formats; JPG, GIF, PNG.
                </p>
                <p>
                    In order to do this, TYPO3 uses two sets of tools:
                </p>
                <strong>
                    ImageMagick / GraphicsMagick:
                </strong>
                <p>
                    For conversion of non-web formats to webformats, combining images with alpha-masks,
                    performing image-effects like blurring and sharpening.
                </p>
                <p>
                    ImageMagick is a collection of external programs on the server called by the exec()
                    function in PHP. TYPO3 uses three of these, namely 'convert' (converting fileformats,
                    scaling, effects), 'combine'/'composite' (combining images with masks) and 'identify'
                    (returns image information). GraphicsMagick is an alternative to ImageMagick and can
                    be enabled by setting [GFX][processor] to 'GraphicsMagick'. This is recommended and enabled
                    by default. Because ImageMagick and Graphicsmagick are external programs, a requirement
                    must be met: The programs must be installed on the server and working. ImageMagick is
                    available for both Windows and Unix. The current version is 6+. ImageMagick homepage is
                    at <a href="http://www.imagemagick.org/">http://www.imagemagick.org/</a>
                </p>
                <strong>GDLib:</strong>
                <p>
                    For drawing boxes and rendering text on images with truetype fonts. Also used for
                    icons, menuitems and generally the TypoScript GIFBUILDER object is based on GDlib,
                    but extensively utilizing ImageMagick to process intermediate results.
                </p>
                <p>
                    GDLib is accessed through internal functions in PHP, you'll need a version of PHP
                    with GDLib compiled in. Also in order to use TrueType fonts with GDLib you'll
                    need FreeType compiled in as well.
                </p>
            </div>
        </div>
    </div>
279

280
281
282
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTestImages">
            <h4 class="panel-title">
283
                <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseTestImages" aria-expanded="true" aria-controls="collapseFive" class="collapsed">
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
                    <span class="caret"></span>
                    About test images
                </a>
            </h4>
        </div>
        <div id="collapseTestImages" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTestImages">
            <div class="panel-body">
                <p>
                    Test-Image by Rotkaeppchen68 (in de.wikipedia) [<a href="http://www.gnu.org/copyleft/fdl.html">GFDL</a> or
                    <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA-3.0</a>],
                    <a href="https://commons.wikimedia.org/wiki/File%3AFuBK-Testbild.png">via Wikimedia Commons</a>
                </p>
            </div>
        </div>
    </div>
299
</div>
300
301

</html>