【HTML】图片转换SVG- 编程源码 -卓越飞翔博客


<!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>
相关推荐
