html模板

在线图片转SVG格式工具源码
2023-10-16 我的站长站

在线图片转SVG格式工具源码

  • 模板编号:2844
  • 点击次数:
  • 模板终端:电脑端
  • 适用版本:静态模板
  • 模板编码:UTF-8
  • 下载权限:普通 / VIP
  • 模板售价:免费下载
  • 下载次数:2

源码介绍

非常简单一款在线图片转SVG格式工具源码,js+html的,无需环境打开即可使用。不想下载可以复制下面代码,保存到HTML文件即可使用。小白不会的就下载源码,已经打包好了。

在线图片转SVG格式工具源码
源码截图

代码分享 

提交表单代码:

<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>

  JS处理代码:

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;    
});    
}    
});


下载地址

· 积分下载:下载扣除对应积分,不扣除下载次数
· 会员免费:VIP会员免费下载,扣除下载次数
· 下载即代表您已阅读并同意 [服务条款]