diff options
Diffstat (limited to 'inc/3rdparty/libraries/mpdf/examples/example04_images.php')
-rw-r--r-- | inc/3rdparty/libraries/mpdf/examples/example04_images.php | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/inc/3rdparty/libraries/mpdf/examples/example04_images.php b/inc/3rdparty/libraries/mpdf/examples/example04_images.php new file mode 100644 index 00000000..b9877634 --- /dev/null +++ b/inc/3rdparty/libraries/mpdf/examples/example04_images.php | |||
@@ -0,0 +1,207 @@ | |||
1 | <?php | ||
2 | |||
3 | |||
4 | |||
5 | $html = ' | ||
6 | <style> | ||
7 | table { border-collapse: collapse; margin-top: 0; text-align: center; } | ||
8 | td { padding: 0.5em; } | ||
9 | h1 { margin-bottom: 0; }z | ||
10 | </style> | ||
11 | <h1>mPDF Images</h1> | ||
12 | |||
13 | <table> | ||
14 | <tr> | ||
15 | <td>GIF</td> | ||
16 | <td>JPG</td> | ||
17 | <td>JPG (CMYK)</td> | ||
18 | <td>PNG</td> | ||
19 | <td>BMP</td> | ||
20 | <td>WMF</td> | ||
21 | <td>SVG</td> | ||
22 | </tr> | ||
23 | <tr> | ||
24 | <td><img style="vertical-align: top" src="tiger.gif" width="80" /></td> | ||
25 | <td><img style="vertical-align: top" src="tiger.jpg" width="80" /></td> | ||
26 | <td><img style="vertical-align: top" src="tigercmyk.jpg" width="80" /></td> | ||
27 | <td><img style="vertical-align: top" src="tiger.png" width="80" /></td> | ||
28 | <td><img style="vertical-align: top" src="tiger.bmp" width="80" /></td> | ||
29 | <td><img style="vertical-align: top" src="tiger2.wmf" width="80" /></td> | ||
30 | <td><img style="vertical-align: top" src="tiger.svg" width="80" /></td> | ||
31 | </tr> | ||
32 | </tr> | ||
33 | <tr> | ||
34 | <td colspan="7" style="text-align: left" ><h4>Opacity 50%</h4></td> | ||
35 | </tr> | ||
36 | <tr> | ||
37 | <tr> | ||
38 | <td><img style="vertical-align: top; opacity: 0.5" src="tiger.gif" width="80" /></td> | ||
39 | <td><img style="vertical-align: top; opacity: 0.5" src="tiger.jpg" width="80" /></td> | ||
40 | <td><img style="vertical-align: top; opacity: 0.5" src="tigercmyk.jpg" width="80" /></td> | ||
41 | <td><img style="vertical-align: top; opacity: 0.5" src="tiger.png" width="80" /></td> | ||
42 | <td><img style="vertical-align: top; opacity: 0.5" src="tiger.bmp" width="80" /></td> | ||
43 | <td><img style="vertical-align: top; opacity: 0.5" src="tiger2.wmf" width="80" /></td> | ||
44 | <td><img style="vertical-align: top; opacity: 0.5" src="tiger.svg" width="80" /></td> | ||
45 | </tr> | ||
46 | </table> | ||
47 | |||
48 | <h4>Alpha channel</h4> | ||
49 | <table> | ||
50 | <tr> | ||
51 | <td>PNG</td> | ||
52 | <td><img style="vertical-align: top" src="alpha.png" width="85" /></td> | ||
53 | <td style="background-color:#FFCCFF; "><img style="vertical-align: top" src="alpha.png" width="85" /></td> | ||
54 | <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="alpha.png" width="85" /></td> | ||
55 | <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="alpha.png" width="85" /></td> | ||
56 | <td style="background-color:#CCFFFF; background: transparent url(\'bg.jpg\') repeat scroll right top;"><img style="vertical-align: top" src="alpha.png" width="85" /></td> | ||
57 | </tr> | ||
58 | </table> | ||
59 | <h4>Transparency</h4> | ||
60 | <table><tr> | ||
61 | <td>PNG</td> | ||
62 | <td style="background-color:#FFCCFF; "><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td> | ||
63 | <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td> | ||
64 | <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td> | ||
65 | <td style="background-color:#CCFFFF; background: transparent url(\'bg.jpg\') repeat scroll right top;"><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td> | ||
66 | </tr><tr> | ||
67 | <td>GIF</td> | ||
68 | <td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td> | ||
69 | <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td> | ||
70 | <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td> | ||
71 | <td style="background-color:#CCFFFF; background: transparent url(\'bg.jpg\') repeat scroll right top;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td> | ||
72 | </tr><tr> | ||
73 | <td>WMF</td> | ||
74 | <td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td> | ||
75 | <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td> | ||
76 | <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td> | ||
77 | <td style="background-color:#CCFFFF; background: transparent url(\'bg.jpg\') repeat scroll right top;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td> | ||
78 | </tr><tr> | ||
79 | <td>SVG</td> | ||
80 | <td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td> | ||
81 | <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td> | ||
82 | <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td> | ||
83 | <td style="background-color:#CCFFFF; background: transparent url(\'bg.jpg\') repeat scroll right top;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td> | ||
84 | </tr></table> | ||
85 | |||
86 | |||
87 | Images returned from tiger.php | ||
88 | <div> | ||
89 | GIF <img style="vertical-align: top" src="tiger.php?t=gif" width="85" /> | ||
90 | JPG <img style="vertical-align: top" src="tiger.php?t=jpg" width="85" /> | ||
91 | PNG <img style="vertical-align: top" src="tiger.php?t=png" width="85" /> | ||
92 | WMF <img style="vertical-align: top" src="tiger.php?t=wmf" width="85" /> | ||
93 | SVG <img style="vertical-align: top" src="tiger.php?t=svg" width="85" /> | ||
94 | </div> | ||
95 | |||
96 | <pagebreak /> | ||
97 | |||
98 | |||
99 | <h3>Image Alignment</h3> | ||
100 | <div>From mPDF version 4.2 onwards, in-line images can be individually aligned (vertically). Most of the values for "vertical-align" are supported: top, bottom, middle, baseline, text-top, and text-bottom. The default value for vertical alignment has been changed to baseline, and the default padding to 0, consistent with most browsers. | ||
101 | </div> | ||
102 | <br /> | ||
103 | |||
104 | <div style="background-color:#CCFFFF;"> | ||
105 | These images <img src="img1.png" style="vertical-align: top;" /> | ||
106 | are <img src="img2.png" style="vertical-align: top;" /> | ||
107 | <b>top</b> <img src="img3.png" style="vertical-align: top;" /> | ||
108 | aligned <img src="img4.png" style="vertical-align: middle;" /> | ||
109 | </div> | ||
110 | <br /> | ||
111 | |||
112 | <div style="background-color:#CCFFFF;"> | ||
113 | These images <img src="img1.png" style="vertical-align: text-top;" /> | ||
114 | are <img src="img2.png" style="vertical-align: text-top;" /> | ||
115 | <b>text-top</b> <img src="img3.png" style="vertical-align: text-top;" /> | ||
116 | aligned <img src="img4.png" style="vertical-align: middle;" /> | ||
117 | </div> | ||
118 | <br /> | ||
119 | |||
120 | <div style="background-color:#CCFFFF;"> | ||
121 | These images <img src="img1.png" style="vertical-align: bottom;" /> | ||
122 | are <img src="img2.png" style="vertical-align: bottom;" /> | ||
123 | <b>bottom</b> <img src="img3.png" style="vertical-align: bottom;" /> | ||
124 | aligned <img src="img4.png" style="vertical-align: middle;" /> | ||
125 | </div> | ||
126 | <br /> | ||
127 | |||
128 | <div style="background-color:#CCFFFF;"> | ||
129 | These images <img src="img1.png" style="vertical-align: text-bottom;" /> | ||
130 | are <img src="img2.png" style="vertical-align: text-bottom;" /> | ||
131 | <b>text-bottom</b> <img src="img3.png" style="vertical-align: text-bottom;" /> | ||
132 | aligned <img src="img4.png" style="vertical-align: middle;" /> | ||
133 | </div> | ||
134 | <br /> | ||
135 | |||
136 | <div style="background-color:#CCFFFF;"> | ||
137 | These images <img src="img1.png" style="vertical-align: baseline;" /> | ||
138 | are <img src="img2.png" style="vertical-align: baseline;" /> | ||
139 | <b>baseline</b> <img src="img3.png" style="vertical-align: baseline;" /> | ||
140 | aligned <img src="img4.png" style="vertical-align: middle;" /> | ||
141 | </div> | ||
142 | <br /> | ||
143 | |||
144 | <div style="background-color:#CCFFFF;"> | ||
145 | These images <img src="img1.png" style="vertical-align: middle;" /> | ||
146 | are <img src="img2.png" style="vertical-align: middle;" /> | ||
147 | <b>middle</b> <img src="img3.png" style="vertical-align: middle;" /> | ||
148 | aligned <img src="img5.png" style="vertical-align: bottom;" /> | ||
149 | </div> | ||
150 | <br /> | ||
151 | |||
152 | <h4>Mixed alignment</h4> | ||
153 | <div style="background-color:#CCFFFF;"> | ||
154 | baseline: <img src="sunset.jpg" width="50" style="vertical-align: baseline;" /> | ||
155 | text-bottom: <img src="sunset.jpg" width="30" style="vertical-align: text-bottom;" /> | ||
156 | middle: <img src="sunset.jpg" width="30" style="vertical-align: middle;" /> | ||
157 | bottom: <img src="sunset.jpg" width="80" style="vertical-align: bottom;" /> | ||
158 | text-top: <img src="sunset.jpg" width="50" style="vertical-align: text-top;" /> | ||
159 | top: <img src="sunset.jpg" width="100" style="vertical-align: top;" /> | ||
160 | </div> | ||
161 | |||
162 | <h3>Image Border and padding</h3> | ||
163 | From mPDF v4.2, Image padding is supported as well as border and margin. | ||
164 | <img src="sunset.jpg" width="100" style="border:3px solid #44FF44; padding: 1em;" /> | ||
165 | |||
166 | <h3>Rotated Images</h3> | ||
167 | <img src="tiger.png" width="100" /> | ||
168 | <img src="tiger.png" rotate="90" width="100" /> | ||
169 | <img src="tiger.png" rotate="180" width="100" /> | ||
170 | <img src="tiger.png" rotate="-90" width="100" /> | ||
171 | <br /> | ||
172 | <img src="tiger.jpg" width="100" /> | ||
173 | <img src="tiger.jpg" rotate="90" width="100" /> | ||
174 | <img src="tiger.jpg" rotate="180" width="100" /> | ||
175 | <img src="tiger.jpg" rotate="-90" width="100" /> | ||
176 | <br /> | ||
177 | <img src="tiger2.wmf" width="80" /> | ||
178 | <img src="tiger2.wmf" rotate="90" width="80" /> | ||
179 | <img src="tiger2.wmf" rotate="180" width="80" /> | ||
180 | <img src="tiger2.wmf" rotate="-90" width="80" /> | ||
181 | <br /> | ||
182 | <img src="tiger.svg" width="100" /> | ||
183 | <img src="tiger.svg" rotate="90" width="85" /> | ||
184 | <img src="tiger.svg" rotate="180" width="100" /> | ||
185 | <img src="tiger.svg" rotate="-90" width="85" /> | ||
186 | <br /> | ||
187 | |||
188 | '; | ||
189 | //============================================================== | ||
190 | //============================================================== | ||
191 | //============================================================== | ||
192 | include("../mpdf.php"); | ||
193 | |||
194 | $mpdf=new mPDF('c'); | ||
195 | |||
196 | $mpdf->WriteHTML($html); | ||
197 | |||
198 | $mpdf->Output(); | ||
199 | exit; | ||
200 | //============================================================== | ||
201 | //============================================================== | ||
202 | //============================================================== | ||
203 | //============================================================== | ||
204 | //============================================================== | ||
205 | |||
206 | |||
207 | ?> \ No newline at end of file | ||