forked from mpdf/mpdf-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example63_new_mPDF_v6-0_features_Images.php
251 lines (199 loc) · 10.2 KB
/
example63_new_mPDF_v6-0_features_Images.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
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
<?php
if (!isset($_REQUEST['html'])) { $_REQUEST['html'] = ''; }
require_once __DIR__ . '/bootstrap.php';
$mpdf = new \Mpdf\Mpdf();
//==============================================================
$html = '
<style>
body, div, p {
font-family: \'DejaVu Sans Condensed\';
font-size: 11pt;
}
.gradient {
border:0.1mm solid #220044;
background-color: #f0f2ff;
background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
box-shadow: 0.3em 0.3em #888888;
}
h4 {
font-weight: bold;
margin-top: 1em;
margin-bottom: 0.3em;
margin-top: 0;
}
div.text {
padding:0.8em;
margin-bottom: 0.7em;
}
p { margin: 0.25em 0; }
p.code {
background-color: #e5e5e5;
margin: 1em 1cm;
padding: 0 0.3cm;
border:0.2mm solid #000088;
box-shadow: 0.3em 0.3em #888888;
}
p.example, div.example {
background-color: #eeeeee;
margin: 0.3em 1em 1em 1em;
padding: 0 0.3cm;
border:0.2mm solid #444444;
}
.code {
font-family: monospace;
font-size: 9pt;
}
.shadowtitle {
height: 8mm;
background-color: #EEDDFF;
background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
padding: 0.8em;
padding-left: 3em;
font-family:sans;
font-size: 26pt;
font-weight: bold;
border: 0.2mm solid white;
border-radius: 0.2em;
box-shadow: 0 0 1em 0.5em rgba(0,0,255,0.5);
color: #AAAACC;
text-shadow: 0.03em 0.03em #666, 0.05em 0.05em rgba(127,127,127,0.5), -0.015em -0.015em white;
}
h3 {
margin: 3em 0 2em -15mm;
background-color: #EEDDFF;
background-gradient: linear #c7cdde #f0f2ff 0 1 0 0.5;
padding: 0.5em;
padding-left: 3em;
width: 50%;
font-family:sans;
font-size: 16pt;
font-weight: bold;
border-left: none;
border-radius: 0 2em 2em 0;
box-shadow: 0 0 2em 0.5em rgba(255,0,0,1);
text-shadow: 0.05em 0.04em rgba(127,127,127,0.5);
}
.css {
font-family: arial;
font-style: italic;
color: #000088;
}
img.smooth {
image-rendering:auto;
image-rendering:optimizeQuality;
-ms-interpolation-mode:bicubic;
}
img.crisp {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
</style>
<body>
<div class="shadowtitle">New Features in mPDF v6.0</div>
<h3>Images</h3>
<h4>Gamma correction in PNG images</h4>
<p>Some PNG images contain a source Gamma correction value to maintain consistent colour display between devices.</p>
<p>mPDF will adjust for gamma correction if a PNG image has a source gAMA entry <> 2.2</p>
<p>Gamma correction is not supported in GIF files.</p>
<p>For more information, and sample image files see <a href="http://www.libpng.org/pub/png/colorcube/gamma-consistency-test.html">http://www.libpng.org/pub/png/colorcube/gamma-consistency-test.html</a></p>
<p>Below are some of the example images, displayed on a background of HTML colour, such that when displayed correctly they should appear as one solid block of the same colour:</p>
<table border="0" cellpadding="10" cellspacing="1" style="font-size: 8pt">
<tbody>
<tr>
<td align="center" bgcolor="#cc9900"><img src="assets/cc9900.gif" alt="" width="48" height="48"></td>
<td><font size="1"> </font></td>
<td align="center" bgcolor="#cc9900"><img src="assets/cc9900_003.png" alt="" width="48" height="48"></td>
<td><font size="1"> </font></td>
<td align="center" bgcolor="#cc9900"><img src="assets/cc9900.png" alt="" width="48" height="48"></td>
<td><font size="1"> </font></td>
<td align="center" bgcolor="#cc9900"><img src="assets/cc9900_004.png" alt="" width="48" height="48"></td>
<td><font size="1"> </font></td>
<td align="center" bgcolor="#cc9900"><img src="assets/cc9900_002.png" alt="" width="48" height="48"></td>
<td><font size="1"> </font></td>
<td align="center" bgcolor="#cc9900"><img src="assets/cc9900_005.png" alt="" width="48" height="48"></td>
</tr>
<tr>
<td align="center">Unlabelled GIF image<br />(the usual kind)</td>
<td><font size="1"> </font></td>
<td align="center">Unlabelled PNG image<br />(no gamma info)</td>
<td><font size="1"> </font></td>
<td align="center">PNG image with gamma 1/1.6<br />(i.e. 0.625)</td>
<td><font size="1"> </font></td>
<td align="center">PNG image with gamma 1/2.2<br />(i.e. 0.4545)</td>
<td><font size="1"> </font></td>
<td align="center">sRGB PNG image<br />("absolute colorimetric" rendering intent "sRGB")</td>
<td><font size="1"> </font></td>
<td align="center">iCCP PNG images<br />("gamma 1.0" pixel data, linear ICC profiles: "iCCPGamma 1.0 profile")</td>
</tr>
</tbody></table>
<div>NB View this page as <a href="example63_new_mPDF_v6-0_features Images.php?html=1">HTML in your browser</a> and see the difference between browsers!</div>
<p>Note that there are inconsistencies between browsers, so the image display varies considerably on the system you are using. There are also image errors which are not always apparent.</p>
<p>The image below is taken from <a href="http://www.w3.org/TR/CSS21/intro.html">http://www.w3.org/TR/CSS21/intro.html</a> and has the gAMA value set to 1.45454 This is probably unintentional and should be 0.45454 which is 1 / 2.2</p>
<p>The image appears differently on IE9/Safari versus Firefox/Opera. To quote from http://www.libpng.org/pub/png/spec/1.2/PNG-Encoders.html "If the source file\'s gamma value is greater than 1.0, it is probably a display system exponent,....and you should use its reciprocal for the PNG gamma."
Some applications seem to ignore this, displaying the image how it was probably intended.</p>
<img src="assets/bach1.png" />
<pagebreak />
<p>The two images below should be displayed with similar colour intensity. The one on the left is a 16-bit gamma-corrected PNG file; on the right is an unlabelled GIF file. Note that in Firefox (31.0) the image on the left looks duller because it has not been gamma-corrected for the display, whilst in IE (9)/Safari/Opera the images looks identical (correct).</p>
<p style="background-color: #cc9900; padding: 2em;"><img src="assets/butterfly_ProPhoto.png" > <img src="assets/butterfly_ProPhoto.gif" ></p>
<br />
<h4>ICC color profiles</h4>
<p>Some PNG and JPEG image files contain an ICC color profile to alter colour display. These are supported in mPDF in PNG and JPG files, except PNG images which require converting via gd_image e.g. Alpha transparency, interlaced etc.</p>
<p>Below is a PNG image which contains an ICC Profile which deliberately changes colours. When correctly displayed (applying the colour profile) ths colours should match the colour names. (In Firefox red appears as green, blue as red etc.)</p>
<div style="background-color: #cc9900; padding: 2em;"><img src="assets/colourTestFakeBRG.png" width="300px" /></div>
<pagebreak />
<h4>Wider support for PNG Images</h4>
<p>mPDF will now display almost every type of PNG image, including: paletted (Indexed) images with Alpha channel (full transparency), and grayscale or RGB truecolor images with single-colour transparency. One PNG type which cannot be handled by mPDF is a 16-bit image with binary (single-color) transparency. (This is because all images need to be converted to 8-bit for inclusion in PDF, and so for example if colour 0x4F27 is set as a transparency, it will treat all 0x4F.. pixels as transparent.)</p>
<h4>Alpha transparency (PNG images)</h4>
Alpha transparency in PNG images has been fixed to work correctly against colour backgrounds e.g.:
<table>
<tr>
<td style="background-color: transparent;">
<img src="assets/alpha09.png" height="180px" />
<img src="assets/alpha36.png" height="180px" />
</td>
<td style="background-color: darkblue;">
<img src="assets/alpha09.png" height="180px" />
<img src="assets/alpha36.png" height="180px" />
</td>
</tr>
</table>
<h4>Interpolation</h4>
<p>PDF allows you to set image interpolation for an image - the result of this is variable and is dependent on the PDF viewer.
mPDF allows you to specify whether interpolation is enabled, using CSS for each image, but: 1) it will not cascade i.e. the CSS property must be set directly on the img object or as class e.g. using <img class="smooth" style="image-rendering:auto"> 2) if an image appears more than once in the document, the interpolation setting will be that of the first appearance.</p>
<p>A configurable variable in config.php determines the default value for the whole document: $this->interpolateImages = false;</p>
<p>The draft CSS3 property "image-rendering" with the following values will be recognised by mPDF:</p>
<ul>
<li>auto (default) - uses the value set by $this->interpolateImages</li>
<li>crisp-edges - interpolation disabled</li>
<li>optimizequality - interpolation enabled</li>
<li>smooth - interpolation enabled</li>
</ul>
<p>The image below on the left has interpolation enabled:</p>
<div>
<img style="image-rendering:smooth; image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic; " src="assets/bgan6a16.png" width="300px" />
<img style="image-rendering:crisp-edges; image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor;" src="assets/bgan6a162.png" width="300px" />
</div>
<p>NB Interpolation cannot be enabled on background images, SVG or WMF images.</p>
<h4>SVG Fonts</h4>
<p>mPDF 6 introduces (limited) support for SVG fonts, recognising the following elements and attributes:</p>
<p class="code">
<defs><br />
<font <i>horiz-adv-x</i>><br />
<font-face <i>font-family units-per-em ascent descent</i> /><br />
<missing-glyph <i>horiz-adv-x d</i> /><br />
<glyph <i>unicode horiz-adv-x d</i> />
</p>
<p>In the example SVG below, the upper row of characters are drawn using paths and lines; in the lower row, they are written as text using glyphs defined as an SVG font.</p>
<img src="assets/fonts-elem-01-t.svg" width="480px" height="360px" />
<p>See the assets/fonts-elem-01-t.svg file in the examples folder for more details.</p>
<p>NB: @font-face is not supported.</p>
';
//==============================================================
if (isset($_REQUEST['html']) && $_REQUEST['html']) { echo $html; exit; }
//==============================================================
$mpdf->WriteHTML($html);
$mpdf->Output();
exit;