源码UI-官方源码UI-官方 资讯动态

图片在线转换SVG单页HTML源码

简介：

图片转换SVG网页HTML源码，只是把位图包装成了矢量图的格式。直接把位图的每个像素塞进去svg，这样生成的放大后会样糊。

图片：

000.png

完整代码：

code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>SVG图片生成器</title>
  6.   <style>
  7.     body {
  8.       display: flex;
  9.       justify-content: center;
  10.       align-items: center;
  11.       height: 100vh;
  12.       background-color: #f7f7f7;
  13.       font-family: Arial, sans-serif;
  14.     }
  15.     .container {
  16.       text-align: center;
  17.       padding: 20px;
  18.       background-color: #fff;
  19.       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  20.     }
  21.     h1 {
  22.       margin-top: 0;
  23.     }
  24.     input[type="file"] {
  25.       margin-bottom: 10px;
  26.       display: none;
  27.     }
  28.     label {
  29.       display: inline-block;
  30.       padding: 10px 20px;
  31.       background-color: #007bff;
  32.       color: #fff;
  33.       cursor: pointer;
  34.     }
  35.     .avatar {
  36.       margin-top: 10px;
  37.       max-width: 100%;
  38.       height: auto;
  39.     }
  40.     .download-button {
  41.       margin-top: 10px;
  42.       display: none;
  43.     }
  44.   </style>
  45. </head>
  46. <body>
  47.   <div class="container">
  48.     <h1>SVG图片生成器</h1>
  49.     <label for="upload">选择图片</label>
  50.     <input id="upload" type="file" required accept="image/gif, image/jpeg, image/png">
  51.     <img class="avatar" src=" alt="Avatar Preview">
  52.     <a class="download-button" href="#" download="noavatar.svg">下载 SVG</a>
  53.   </div>
  54. <script>
  55. document.getElementById('upload').addEventListener('change', function() {
  56.   var file = this.files[0];
  57.   if (file) {
  58.     var reader = new FileReader();
  59.     reader.readAsDataURL(file);
  60.     reader.addEventListener('load', function() {
  61.       var dataURL = this.result;
  62.       var svgCode = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120"><image xlink:href="'+dataURL+'" height="120" width="120"/></svg>';
  63.       var blob = new Blob([svgCode], {type: 'image/svg+xml'});
  64.       var url = URL.createObjectURL(blob);
  65.       document.querySelector('.avatar').src = url;
  66.       document.querySelector('.download-button').style.display = 'inline-block';
  67.       document.querySelector('.download-button').href = url;
  68.     });
  69.   }
  70. });
  71. </script>
  72. </body>
  73. </html>

下载说明：

1.本站资源都是白菜价出售，同样的东西，我们不卖几百，也不卖几十，甚至才卖几块钱，一个永久会员能下载全站100%源码了，所以单独购买也好，会员也好均不提供相关技术服务。

2.如果源码下载地址失效请/联系站长QQ进行补发。

3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4.本站站内提供的所有可下载资源（软件等等）本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发）；但本网站不能保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug；同时本站用户必须明白，【源码源码ui网】对提供下载的软件等不拥有任何权利（本站原创和特约原创作者除外），其版权归该资源的合法拥有者所有。

5.请您认真阅读上述内容，购买即以为着您同意上述内容。

源码UI网 » 图片在线转换SVG单页HTML源码

源码UI-官方 钻石

分享到：

相关推荐

发表回复