图片在线转换SVG单页HTML源码
简介:
图片转换SVG网页HTML源码,只是把位图包装成了矢量图的格式。直接把位图的每个像素塞进去svg,这样生成的放大后会样糊。
图片:
完整代码:
code
- <!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>
下载说明:
1.本站资源都是白菜价出售,同样的东西,我们不卖几百,也不卖几十,甚至才卖几块钱,一个永久会员能下载全站100%源码了,所以单独购买也好,会员也好均不提供相关技术服务。
2.如果源码下载地址失效请/联系站长QQ进行补发。
3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!
4.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【源码源码ui网】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。
5.请您认真阅读上述内容,购买即以为着您同意上述内容。
源码UI网 » 图片在线转换SVG单页HTML源码
1.本站资源都是白菜价出售,同样的东西,我们不卖几百,也不卖几十,甚至才卖几块钱,一个永久会员能下载全站100%源码了,所以单独购买也好,会员也好均不提供相关技术服务。
2.如果源码下载地址失效请/联系站长QQ进行补发。
3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!
4.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【源码源码ui网】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。
5.请您认真阅读上述内容,购买即以为着您同意上述内容。
源码UI网 » 图片在线转换SVG单页HTML源码