Chinaunix首页 | 论坛 | 博客

IT民工窝棚qbq.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

qbq

  • 博客访问： 30479982
  • 博文数量： 708
  • 博客积分： 12163
  • 博客等级： 上将
  • 技术积分： 8240
  • 用 户 组： 普通用户
  • 注册时间： 2007-12-04 20:59
文章分类

全部博文（708）

推荐博文
相关博文
JavaScript: Data URI to image

分类： Web开发

2014-10-14 13:45:20


点击(此处)折叠或打开

  1. <html>
  2. <head>
  3.     <title>Data URI to image</title>
  4.     <style>
  5.         .data-uri{width: 500px; height: 200px;}
  6.         .convert-button-wrapper {margin-top: 20px;}
  7.         .preview{margin-top: 20px;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <label>
  12.         <p>Data URI:</p>
  13.         <textarea id="dataURI" class="data-uri">data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRENEQkRCO30gLnN0MXtmaWxsOiNGNEY0RjQ7fTwvc3R5bGU+PGcgaWQ9IkxheWVyXzIiPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xLjUgMTBsNS45LTggNi4xIDhoMS41bC03LjYtMTAtNy40IDEweiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik03LjQgMmwtNS45IDhoMTJ6Ii8+PC9nPjwvc3ZnPg==</textarea>
  14.     </label>
  15.     <div class="preview">
  16.         <image id="dataURIImage" src="" />
  17.     </div>
  18.     <div class="convert-button-wrapper">
  19.         <button class="convert-button" id="convertButton">Convert</button>
  20.     </div>
  21.     <form>
  22.     </form>
  23.     <canvas id="imageCanvas"></canvas>
  24.     <script>
  25.         var dataURIEL = document.getElementById('dataURI');
  26.         var dataImage = document.getElementById('dataURIImage');
  27.         
  28.         function previewImage() {
  29.             var dataURI = dataURIEL.value;
  30.             dataImage.src = dataURI;
  31.         }
  32.         previewImage();
  33.         
  34.         function convertDataURLToImageData(dataURL) {
  35.             if (dataURL !== undefined && dataURL !== null) {
  36.                 var canvas = document.getElementById('imageCanvas'),
  37.                     context = canvas.getContext('2d');
  38.                 
  39.                 canvas.width = dataImage.width;
  40.                 canvas.height = dataImage.height;
  41.                 
  42.                 context.drawImage(dataImage, 0, 0, canvas.width, canvas.height);
  43.                 //saveAs(context.getImageData(0, 0, canvas.width, canvas.height), "abc.png");
  44.                 //window.open('data:image/png,' + context.getImageData(0, 0, canvas.width, canvas.height));
  45.                 //img.src = canvas.toDataURL("image/png");
  46.                 //SaveToDisk(context.getImageData(0, 0, canvas.width, canvas.height), "test.png");
  47.             }
  48.         }
  49.         
  50.         dataURIEL.onkeyup = previewImage;
  51.         document.getElementById('convertButton').onclick = function() {
  52.             var dataURI = dataURIEL.value;
  53.             convertDataURLToImageData(dataURI);
  54.         };
  55.     </script>
  56. </body>
  57. </html>

阅读(2316) | 评论(0) | 转发(0) |
0

上一篇：使用java.lang.System.setProperties(Properties props)要注意

下一篇：java.lang.ClassNotFoundException: org.apache.maven.cli.MavenLoggerManager

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6