svg生成器网站源码 暂无演示

svg生成器网站源码

售价:
暂无购买权限
  • 普通用户暂无购买权限 升级会员
  • 会员会员购买价格 :0积分
  • 终身会员购买价格 : 免费
  • 坚持每天更新
  • 多平台源码收集
  • VIP群保障服务
  • 收集分享更新
  • 海量源码资源
  • 技术支持保障有力

升级尊贵会员
享受全站VIP待遇

1448+
会员已经加入
  • 文章介绍
  • 评价建议
  • 演示 https://www.ld4.net/svg.html

     

        <!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>
    有问题可以加入技术QQ群一起交流学习
    本站vip会员 请加入无忧模板网 VIP群(50604020) PS:加入时备注用户名或昵称
    普通注册会员或访客 请加入无忧模板网 技术交流群(50604130)
    客服微信号:15898888535

    pbootcms模板网 » svg生成器网站源码

    发表评论