example04_images.php 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <?php
  2. $html = '
  3. <style>
  4. table { border-collapse: collapse; margin-top: 0; text-align: center; }
  5. td { padding: 0.5em; }
  6. h1 { margin-bottom: 0; }
  7. </style>
  8. <h1>mPDF Images</h1>
  9. <table>
  10. <tr>
  11. <td>GIF</td>
  12. <td>JPG</td>
  13. <td>JPG (CMYK)</td>
  14. <td>PNG</td>
  15. <td>BMP</td>
  16. <td>WMF</td>
  17. <td>SVG</td>
  18. </tr>
  19. <tr>
  20. <td><img style="vertical-align: top" src="tiger.gif" width="80" /></td>
  21. <td><img style="vertical-align: top" src="tiger.jpg" width="80" /></td>
  22. <td><img style="vertical-align: top" src="tigercmyk.jpg" width="80" /></td>
  23. <td><img style="vertical-align: top" src="tiger.png" width="80" /></td>
  24. <td><img style="vertical-align: top" src="tiger.bmp" width="80" /></td>
  25. <td><img style="vertical-align: top" src="tiger2.wmf" width="80" /></td>
  26. <td><img style="vertical-align: top" src="tiger.svg" width="80" /></td>
  27. </tr>
  28. </tr>
  29. <tr>
  30. <td colspan="7" style="text-align: left" ><h4>Opacity 50%</h4></td>
  31. </tr>
  32. <tr>
  33. <tr>
  34. <td><img style="vertical-align: top; opacity: 0.5" src="tiger.gif" width="80" /></td>
  35. <td><img style="vertical-align: top; opacity: 0.5" src="tiger.jpg" width="80" /></td>
  36. <td><img style="vertical-align: top; opacity: 0.5" src="tigercmyk.jpg" width="80" /></td>
  37. <td><img style="vertical-align: top; opacity: 0.5" src="tiger.png" width="80" /></td>
  38. <td><img style="vertical-align: top; opacity: 0.5" src="tiger.bmp" width="80" /></td>
  39. <td><img style="vertical-align: top; opacity: 0.5" src="tiger2.wmf" width="80" /></td>
  40. <td><img style="vertical-align: top; opacity: 0.5" src="tiger.svg" width="80" /></td>
  41. </tr>
  42. </table>
  43. <h4>Alpha channel</h4>
  44. <table>
  45. <tr>
  46. <td>PNG</td>
  47. <td><img style="vertical-align: top" src="alpha.png" width="85" /></td>
  48. <td style="background-color:#FFCCFF; "><img style="vertical-align: top" src="alpha.png" width="85" /></td>
  49. <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="alpha.png" width="85" /></td>
  50. <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="alpha.png" width="85" /></td>
  51. <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>
  52. </tr>
  53. </table>
  54. <h4>Transparency</h4>
  55. <table><tr>
  56. <td>PNG</td>
  57. <td style="background-color:#FFCCFF; "><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td>
  58. <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td>
  59. <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger24trns.png" width="85" /></td>
  60. <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>
  61. </tr><tr>
  62. <td>GIF</td>
  63. <td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td>
  64. <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td>
  65. <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger8trns.gif" width="85" /></td>
  66. <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>
  67. </tr><tr>
  68. <td>WMF</td>
  69. <td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td>
  70. <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td>
  71. <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger2.wmf" width="85" /></td>
  72. <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>
  73. </tr><tr>
  74. <td>SVG</td>
  75. <td style="background-color:#FFCCFF;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td>
  76. <td style="background-color:#FFFFCC;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td>
  77. <td style="background-color:#CCFFFF;"><img style="vertical-align: top" src="tiger.svg" width="85" /></td>
  78. <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>
  79. </tr></table>
  80. Images returned from tiger.php
  81. <div>
  82. GIF <img style="vertical-align: top" src="tiger.php?t=gif" width="85" />
  83. JPG <img style="vertical-align: top" src="tiger.php?t=jpg" width="85" />
  84. PNG <img style="vertical-align: top" src="tiger.php?t=png" width="85" />
  85. WMF <img style="vertical-align: top" src="tiger.php?t=wmf" width="85" />
  86. SVG <img style="vertical-align: top" src="tiger.php?t=svg" width="85" />
  87. </div>
  88. <pagebreak />
  89. <h3>Image Alignment</h3>
  90. <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.
  91. </div>
  92. <br />
  93. <div style="background-color:#CCFFFF;">
  94. These images <img src="img1.png" style="vertical-align: top;" />
  95. are <img src="img2.png" style="vertical-align: top;" />
  96. <b>top</b> <img src="img3.png" style="vertical-align: top;" />
  97. aligned <img src="img4.png" style="vertical-align: middle;" />
  98. </div>
  99. <br />
  100. <div style="background-color:#CCFFFF;">
  101. These images <img src="img1.png" style="vertical-align: text-top;" />
  102. are <img src="img2.png" style="vertical-align: text-top;" />
  103. <b>text-top</b> <img src="img3.png" style="vertical-align: text-top;" />
  104. aligned <img src="img4.png" style="vertical-align: middle;" />
  105. </div>
  106. <br />
  107. <div style="background-color:#CCFFFF;">
  108. These images <img src="img1.png" style="vertical-align: bottom;" />
  109. are <img src="img2.png" style="vertical-align: bottom;" />
  110. <b>bottom</b> <img src="img3.png" style="vertical-align: bottom;" />
  111. aligned <img src="img4.png" style="vertical-align: middle;" />
  112. </div>
  113. <br />
  114. <div style="background-color:#CCFFFF;">
  115. These images <img src="img1.png" style="vertical-align: text-bottom;" />
  116. are <img src="img2.png" style="vertical-align: text-bottom;" />
  117. <b>text-bottom</b> <img src="img3.png" style="vertical-align: text-bottom;" />
  118. aligned <img src="img4.png" style="vertical-align: middle;" />
  119. </div>
  120. <br />
  121. <div style="background-color:#CCFFFF;">
  122. These images <img src="img1.png" style="vertical-align: baseline;" />
  123. are <img src="img2.png" style="vertical-align: baseline;" />
  124. <b>baseline</b> <img src="img3.png" style="vertical-align: baseline;" />
  125. aligned <img src="img4.png" style="vertical-align: middle;" />
  126. </div>
  127. <br />
  128. <div style="background-color:#CCFFFF;">
  129. These images <img src="img1.png" style="vertical-align: middle;" />
  130. are <img src="img2.png" style="vertical-align: middle;" />
  131. <b>middle</b> <img src="img3.png" style="vertical-align: middle;" />
  132. aligned <img src="img5.png" style="vertical-align: bottom;" />
  133. </div>
  134. <br />
  135. <h4>Mixed alignment</h4>
  136. <div style="background-color:#CCFFFF;">
  137. baseline: <img src="sunset.jpg" width="50" style="vertical-align: baseline;" />
  138. text-bottom: <img src="sunset.jpg" width="30" style="vertical-align: text-bottom;" />
  139. middle: <img src="sunset.jpg" width="30" style="vertical-align: middle;" />
  140. bottom: <img src="sunset.jpg" width="80" style="vertical-align: bottom;" />
  141. text-top: <img src="sunset.jpg" width="50" style="vertical-align: text-top;" />
  142. top: <img src="sunset.jpg" width="100" style="vertical-align: top;" />
  143. </div>
  144. <h3>Image Border and padding</h3>
  145. From mPDF v4.2, Image padding is supported as well as border and margin.
  146. <img src="sunset.jpg" width="100" style="border:3px solid #44FF44; padding: 1em;" />
  147. <h3>Rotated Images</h3>
  148. <img src="tiger.png" width="100" />
  149. <img src="tiger.png" rotate="90" width="100" />
  150. <img src="tiger.png" rotate="180" width="100" />
  151. <img src="tiger.png" rotate="-90" width="100" />
  152. <br />
  153. <img src="tiger.jpg" width="100" />
  154. <img src="tiger.jpg" rotate="90" width="100" />
  155. <img src="tiger.jpg" rotate="180" width="100" />
  156. <img src="tiger.jpg" rotate="-90" width="100" />
  157. <br />
  158. <img src="tiger2.wmf" width="80" /> &nbsp; &nbsp; &nbsp;
  159. <img src="tiger2.wmf" rotate="90" width="80" /> &nbsp; &nbsp; &nbsp;
  160. <img src="tiger2.wmf" rotate="180" width="80" /> &nbsp; &nbsp; &nbsp;
  161. <img src="tiger2.wmf" rotate="-90" width="80" />
  162. <br />
  163. <img src="tiger.svg" width="100" />&nbsp;
  164. <img src="tiger.svg" rotate="90" width="85" />&nbsp;
  165. <img src="tiger.svg" rotate="180" width="100" />&nbsp;
  166. <img src="tiger.svg" rotate="-90" width="85" />
  167. <br />
  168. ';
  169. //==============================================================
  170. //==============================================================
  171. //==============================================================
  172. include("../mpdf.php");
  173. $mpdf=new mPDF('c');
  174. $mpdf->WriteHTML($html);
  175. $mpdf->Output();
  176. exit;
  177. //==============================================================
  178. //==============================================================
  179. //==============================================================
  180. //==============================================================
  181. //==============================================================
  182. ?>