svg生成器网站源码_pbootcms模板网

svg生成器网站源码

售价：

暂无购买权限

普通用户暂无购买权限升级会员
会员会员购买价格 :0积分
终身会员购买价格 : 免费

坚持每天更新
多平台源码收集
VIP群保障服务
收集分享更新
海量源码资源
技术支持保障有力

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>SVG图片生成器</title>
      <style>
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #f7f7f7;
          font-family: Arial, sans-serif;
        }
        .container {
          text-align: center;
          padding: 20px;
          background-color: #fff;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1 {
          margin-top: 0;
        }
        input[type="file"] {
          margin-bottom: 10px;
          display: none;
        }
        label {
          display: inline-block;
          padding: 10px 20px;
          background-color: #007bff;
          color: #fff;
          cursor: pointer;
        }
        .avatar {
          margin-top: 10px;
          max-width: 100%;
          height: auto;
        }
        .download-button {
          margin-top: 10px;
          display: none;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <h1>SVG图片生成器</h1>
        <label for="upload">选择图片</label>
        <input id="upload" type="file" required accept="image/gif, image/jpeg, image/png">
        <img class="avatar" src="" alt="Avatar Preview">
        <a class="download-button" href="#" download="noavatar.svg">下载 SVG</a>
      </div>
    <script>
    document.getElementById('upload').addEventListener('change', function() {
      var file = this.files[0];
      if (file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.addEventListener('load', function() {
          var dataURL = this.result;
          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>';
          var blob = new Blob([svgCode], {type: 'image/svg+xml'});
          var url = URL.createObjectURL(blob);
          document.querySelector('.avatar').src = url;
          document.querySelector('.download-button').style.display = 'inline-block';
          document.querySelector('.download-button').href = url;
        });
      }
    });
    </script>
    </body>
    </html>