Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
example04_images.php 9.02 KB
Newer Older
Cepeda Vacacela Carlos Roberto's avatar
Initial commit  
Cepeda Vacacela Carlos Roberto committed
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 
<?php



$html = '
<style>
table { border-collapse: collapse; margin-top: 0; text-align: center; }
td { padding: 0.5em; }
h1 { margin-bottom: 0; }
</style>
<h1>mPDF Images</h1>

<table>
<tr>
<td>GIF</td>
<td>JPG</td>
<td>JPG (CMYK)</td>
<td>PNG</td>
<td>BMP</td>
<td>WMF</td>
<td>SVG</td>
</tr>
<tr>
<td><img style="vertical-align: top" src="tiger.gif" width="80" /></td>
<td><img style="vertical-align: top" src="tiger.jpg" width="80" /></td>
<td><img style="vertical-align: top" src="tigercmyk.jpg" width="80" /></td>
<td><img style="vertical-align: top" src="tiger.png" width="80" /></td>
<td><img style="vertical-align: top" src="tiger.bmp" width="80" /></td>
<td><img style="vertical-align: top" src="tiger2.wmf" width="80" /></td>
<td><img style="vertical-align: top" src="tiger.svg" width="80" /></td>
</tr>
</tr>
<tr>
<td colspan="7" style="text-align: left" ><h4>Opacity 50%</h4></td>
</tr>
<tr>
<tr>
<td><img style="vertical-align: top; opacity: 0.5" src="tiger.gif" width="80" /></td>
<td><img style="vertical-align: top; opacity: 0.5" src="tiger.jpg" width="80" /></td>
<td><img style="vertical-align: top; opacity: 0.5" src="tigercmyk.jpg" width="80" /></td>
<td><img style="vertical-align: top; opacity: 0.5" src="tiger.png" width="80" /></td>
<td><img style="vertical-align: top; opacity: 0.5" src="tiger.bmp" width="80" /></td>
<td><img style="vertical-align: top; opacity: 0.5" src="tiger2.wmf" width="80" /></td>
<td><img style="vertical-align: top; opacity: 0.5" src="tiger.svg" width="80" /></td>
</tr>
</table>

<h4>Alpha channel</h4>
<table>
<tr>
<td>PNG</td>
<td><img style="vertical-align: top" src="alpha.png" width="85" /></td>
<td style="background-color:#FFCCFF; "><img style="vertical-align: top" src="alpha.png" width="85" /></td>
<td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="alpha.png" width="85" /></td>
<td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="alpha.png" width="85" /></td>
<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>
</tr>
</table>
<h4>Transparency</h4>
<table><tr>
<td>PNG</td>
<td style="background-color:#FFCCFF; "><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td>
<td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td>
<td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td>
<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>
</tr><tr>
<td>GIF</td>
<td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td>
<td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td>
<td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td>
<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>
</tr><tr>
<td>WMF</td>
<td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td>
<td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td>
<td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td>
<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>
</tr><tr>
<td>SVG</td>
<td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td>
<td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td>
<td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td>
<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>
</tr></table>


Images returned from tiger.php
<div>
GIF <img style="vertical-align: top" src="tiger.php?t=gif" width="85" />
JPG <img style="vertical-align: top" src="tiger.php?t=jpg" width="85" />
PNG <img style="vertical-align: top" src="tiger.php?t=png" width="85" />
WMF <img style="vertical-align: top" src="tiger.php?t=wmf" width="85" />
SVG <img style="vertical-align: top" src="tiger.php?t=svg" width="85" />
</div>

<pagebreak />


<h3>Image Alignment</h3>
<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.
</div>
<br />

<div style="background-color:#CCFFFF;">
These images <img src="img1.png" style="vertical-align: top;" />
are <img src="img2.png" style="vertical-align: top;" />
<b>top</b> <img src="img3.png" style="vertical-align: top;" />
aligned <img src="img4.png" style="vertical-align: middle;" />
</div>
<br />

<div style="background-color:#CCFFFF;">
These images <img src="img1.png" style="vertical-align: text-top;" />
are <img src="img2.png" style="vertical-align: text-top;" />
<b>text-top</b> <img src="img3.png" style="vertical-align: text-top;" />
aligned <img src="img4.png" style="vertical-align: middle;" />
</div>
<br />

<div style="background-color:#CCFFFF;">
These images <img src="img1.png" style="vertical-align: bottom;" />
are <img src="img2.png" style="vertical-align: bottom;" />
<b>bottom</b> <img src="img3.png" style="vertical-align: bottom;" />
aligned <img src="img4.png" style="vertical-align: middle;" />
</div>
<br />

<div style="background-color:#CCFFFF;">
These images <img src="img1.png" style="vertical-align: text-bottom;" />
are <img src="img2.png" style="vertical-align: text-bottom;" />
<b>text-bottom</b> <img src="img3.png" style="vertical-align: text-bottom;" />
aligned <img src="img4.png" style="vertical-align: middle;" />
</div>
<br />

<div style="background-color:#CCFFFF;">
These images <img src="img1.png" style="vertical-align: baseline;" />
are <img src="img2.png" style="vertical-align: baseline;" />
<b>baseline</b> <img src="img3.png" style="vertical-align: baseline;" />
aligned <img src="img4.png" style="vertical-align: middle;" />
</div>
<br />

<div style="background-color:#CCFFFF;">
These images <img src="img1.png" style="vertical-align: middle;" />
are <img src="img2.png" style="vertical-align: middle;" />
<b>middle</b> <img src="img3.png" style="vertical-align: middle;" />
aligned <img src="img5.png" style="vertical-align: bottom;" />
</div>
<br />

<h4>Mixed alignment</h4>
<div style="background-color:#CCFFFF;">
baseline: <img src="sunset.jpg" width="50" style="vertical-align: baseline;" />
text-bottom: <img src="sunset.jpg" width="30" style="vertical-align: text-bottom;" />
middle: <img src="sunset.jpg" width="30" style="vertical-align: middle;" />
bottom: <img src="sunset.jpg" width="80" style="vertical-align: bottom;" />
text-top: <img src="sunset.jpg" width="50" style="vertical-align: text-top;" />
top: <img src="sunset.jpg" width="100" style="vertical-align: top;" />
</div>

<h3>Image Border and padding</h3>
From mPDF v4.2, Image padding is supported as well as border and margin.
<img src="sunset.jpg" width="100" style="border:3px solid #44FF44; padding: 1em;" />

<h3>Rotated Images</h3>
<img src="tiger.png" width="100" /> 
<img src="tiger.png" rotate="90" width="100" /> 
<img src="tiger.png" rotate="180" width="100" /> 
<img src="tiger.png" rotate="-90" width="100" /> 
<br />
<img src="tiger.jpg" width="100" /> 
<img src="tiger.jpg" rotate="90" width="100" /> 
<img src="tiger.jpg" rotate="180" width="100" /> 
<img src="tiger.jpg" rotate="-90" width="100" /> 
<br />
<img src="tiger2.wmf" width="80" /> &nbsp; &nbsp; &nbsp;
<img src="tiger2.wmf" rotate="90" width="80" /> &nbsp; &nbsp; &nbsp;
<img src="tiger2.wmf" rotate="180" width="80" /> &nbsp; &nbsp; &nbsp;
<img src="tiger2.wmf" rotate="-90" width="80" />
<br />
<img src="tiger.svg" width="100" />&nbsp;
<img src="tiger.svg" rotate="90" width="85" />&nbsp;
<img src="tiger.svg" rotate="180" width="100" />&nbsp;
<img src="tiger.svg" rotate="-90" width="85" /> 
<br />

';
//==============================================================
//==============================================================
//==============================================================
include("../mpdf.php");

$mpdf=new mPDF('c'); 

$mpdf->WriteHTML($html);

$mpdf->Output();
exit;
//==============================================================
//==============================================================
//==============================================================
//==============================================================
//==============================================================


?>