当前位置：教热门 > 其他 > 图片在线转换SVG单页HTML源码
教热门-官方教热门-官方 其他
同款下载

图片在线转换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. 本站所有资源来源于用户上传和网络，如有侵权请联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！

教热门 » 图片在线转换SVG单页HTML源码

教热门-官方 普通

分享到：

相关推荐

发表回复