PrintSample38.html 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>WEB打印控件LODOP的样例三十八:用BASE64编码输出图片</title>
  6. <script language="javascript" src="LodopFuncs.js"></script>
  7. </head>
  8. <body>
  9. <h2><font color="#009999">演示用BASE64编码输出图片:</font></h2>
  10. <p>&nbsp;&nbsp;&nbsp; BASE64编码是用字符串传递图片的常用方式,当浏览器(如IE6、IE7)不支持BASE64图片时,</p>
  11. <p>可把图片编码直接送给ADD_PRINT_IMAGE输出图片。编码描述说明的格式不变,样式如下:</p>
  12. <p><font color="#FF0000">data:image/jpg;base64,</font><font color="#0000FF">XXXXXXXXXXXXXXXX&nbsp;</font>
  13. &nbsp;其中红色部分是编码描述说明,蓝色部分是内容,</p>
  14. <p>注意紧跟&quot;<font color="#FF0000">/</font>&quot;之后的图片格式&quot;<font color="#FF0000">jpg</font>&quot;很重要,
  15. 一定要与生成编码时的图片格式保持一致,</p>
  16. <p>目前控件支持bmp、jpg、jpeg、gif、png、ico、emf、wmf等格式的图片。</p>
  17. <p>用下面的编码串进入<a href="javascript:myPreview()">打印预览</a>看看,也可以是打印维护或
  18. <a href="javascript:myDesign()">打印设计</a>的背景图:
  19. </p>
  20. <textarea rows="28" id="t1" cols="85">
  21. data:image/jpg;base64,
  22. /9j/4AAQSkZJRgABAgIAAAAAAAD//gAeQUNEIFN5c3RlbXMgRGlnaXRhbCBJbWFnaW5nAP/AABEI
  23. AEIAYwMBIgACEQEDEQH/2wCEABQNDxEPDBQREBEWFRQXHjIgHhsbHj0rLiQySD9MS0c/RkRQWnNh
  24. UFVsVkRGZIhlbHZ6gIKATWCNl4x9lnN+gHsBHyEhLSctWDAwWLl7aXu5ubm5ubm5ubm5ubm5ubm5
  25. ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5uf/EAHkAAQADAQEBAAAAAAAAAAAAAAAD
  26. BAUCAQYQAAICAgAFAgQDBwUAAAAAAAECAAMEEQUSIUFREzEiYXGBFDJCBiORobHB0VNykuHwAQEB
  27. AQEAAAAAAAAAAAAAAAAAAgEDEQEBAQEBAAMAAAAAAAAAAAAAARECURIxQf/aAAwDAQACEQMRAD8A
  28. +yiIgInk4stCnQ+JvAgdyNr0H5dsflIbXA+K5wo7Azmu2qwlUYEjrrWjqB22RZ2RR9TImzLl/Sh+
  29. xnVhAEo5FoEC0vE9H46v+JlmnMotOg+m8N0mGOaw9JMMZiOsDeiZFGRdikBtvX4PuPpNSq1Lqw9b
  30. BlPeB1ERA9iJTycglvSrP+4j+kDu6/ZKVnr3bxM7OsxMWotbUjOfYa6mT3WrjUc5GyeijyZm24L3
  31. g35DHmPXqdBRKk1luK9V19p5lJrTsAdn+P8AaaWM93MLvT9RAvINNonyRv3HSVMDFe12X1GalTvm
  32. +Xgf+6TSucVpoaAA0AO03q/hEFubW+1BIce6MNEfaVRzXWaEiy2W48rDm8fL6eJDZa+MPRFmwRtm
  33. /Uo8b+cmTWtH8XjYxKDmtsHuKxvX1PsJE/GdflxT97BMay9iOVBpR7ASAu2+pl/GJ1sX8UutQhQl
  34. W+4PMZ1wbP8AwmQK2Y+i50d9j5mMrmSKdysjNffRIOHMzcPoaz8xQb3LHScVqXEcr0VFSH94/fwJ
  35. WxhsgSHJYNxC7mPVWA+2pPjuqsIFHJyUt4siOdVoDr7f9ybJrOfYtFbgoPisYb19we/9YowfVJJ9
  36. MKrELbvZI34lxzVjU8lY0B1PknyZW+MxyxqxqRXWNKv85l5WSWJnmXl7JlFrOZpjUyuERrn9lG9e
  37. ZnF2tcs56k7b6yXMt5itCnovVvr2kI6S+YmvXOh0kDHrJGBY6A3L2DwPLyiGKciHu3SVbjJFClHs
  38. cIilmPYCfQcJ4NzMLL+oHYew/wAzSwODUYifEec9x7CaQAA0AAB2nO9eKwA0AANARESWsjjnDrrS
  39. MvDIF6jTIfZx/kTFTihqBXIRqbAO46b+s+ylPM4bj5Y+NdN5ExUz6rIpyj6QFbhlA10O5Dk5bkEG
  40. c5n7L2oS+HZyt5Q6mRdjcbxX1cllqeQm4lbefEt1pJMh/EcnXpvsJC5y2OjVdvwKyP7T2rhnEcht
  41. VYd5B7ldD+cvHPXVR2CxOyfcy9gcOvzrNVp8I92PsJocJ/ZmxCLM5wB/pod/xM+lqrSqsJWgVR7A
  42. CbevGYo4HB8bEAYqLLB+ojoPoJoT2JCiIiB5ERAREQEREBERAREQEREBERAREQP/2Q==
  43. </textarea>
  44. <br>
  45. 注:用LODOP生成BASE64编码的方法请参考<a href="PrintSample40.html">样例四十</a>的最后几个演示
  46. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a></p>
  47. <script language="javascript" type="text/javascript">
  48. var LODOP; //声明为全局变量
  49. function myPreview() {
  50. LODOP=getLodop();
  51. var strBASE64Code=document.getElementById('t1').value;
  52. LODOP.PRINT_INIT("打印插件功能演示_Lodop功能_BASE64编码串打印图片");
  53. LODOP.ADD_PRINT_IMAGE(100,100,"100%","100%",strBASE64Code);
  54. LODOP.PREVIEW();
  55. };
  56. function myDesign() {
  57. LODOP=getLodop();
  58. var strBASE64Code=document.getElementById('t1').value;
  59. LODOP.PRINT_INIT("打印插件功能演示_Lodop功能_BASE64编码串当背景图");
  60. LODOP.ADD_PRINT_SETUP_BKIMG(strBASE64Code);
  61. LODOP.ADD_PRINT_TEXT(22,30,193,28,"这是正常内容,后面是背景图");
  62. LODOP.PRINT_DESIGN();
  63. };
  64. </script>
  65. </body>
  66. </html>