svg to png

svg 如何转png

svg to png

首先要获取svg. 我们可以通过文件拖入，来获取svg 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            border: 1px solid #aaa;
            padding: 10px;
            margin: 10px;
            width: 1050px;
            min-height: 300px;
        }
    </style>
</head>
<body>
<h3>请拖拽您的头像到下方区域</h3>
<div id="container">

</div>
<script>
    /*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
    document.ondragover = function (e) {
        e.preventDefault();  //只有在ondragover中阻止默认行为才能触发 ondrop 而不是 ondragleave
    };
    document.ondrop = function (e) {
        e.preventDefault();  //阻止 document.ondrop的默认行为  *** 在新窗口中打开拖进的图片
    };
    /*拖拽的源对象----- 客户端的一张图片 */
    /*拖拽目标对象-----div#container  若图片释放在此元素上方，则需要在其中显示*/
    container.ondragover = function (e) {
        e.preventDefault();
    };
    container.ondrop = function (e) {
        console.log(e.dataTransfer);
//        chrome 此处的显示有误
        var list = e.dataTransfer.files;

        console.log(list);
        for (var i = 0; i < list.length; i++) {
            var f = list[i];
//            console.log(f);
            reader(f);
//            读取指定文件的内容 作为“数据URL”
//            reader.readAsDataURL(f);
//            当客户端文件读取完成 触发onload事件
        }
    };
    function reader(f) {
        var reader = new FileReader();
        console.log(reader);
        reader.readAsDataURL(f);
        reader.onload = function () {
//            console.log(reader.result);
            var img = new Image();
            img.src = reader.result;
            container.appendChild(img);

        }
    }


</script>
</body>
</html>

这样就可以实现 svg to png 如果不想直接访问 http://www.svgtopng.cn 可以svg 预览

posted @ 2020-11-06 14:19  战略性撤退  阅读(183)  评论(0)    收藏  举报