psd.js 在线解析photoshop psd文件信息，还可转成合成图-BFW插件库

psd.js 在线解析photoshop psd文件信息，还可转成合成图

第一步引入bfwone

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=psd.min" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {

            document.getElementById('dropzone').addEventListener('dragover', onDragOver, true);
            document.getElementById('dropzone').addEventListener('drop', onDrop, true);


        });
        function onDragOver(e) {

            e.stopPropagation();
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        }

        function onDrop(e) {
            e.stopPropagation();
            e.preventDefault();

            var PSD = require('psd');

            PSD.fromEvent(e).then(function (psd) {
                var data = JSON.stringify(psd.tree().export(), undefined, 2);
                console.log(data);
                document.getElementById('data').innerHTML = data;
                document.getElementById('image').appendChild(psd.image.toPng());
            });


        }
    </script>
    <style type="text/css">
        body, html {
            padding: 0;
            margin: 0;
        }

        #dropzone {
            width: 500px;
            height: 100px;
            border: 1px #ababab dashed;
            margin: 50px auto;
        }

        #dropzone p {
            text-align: center;
            line-height: 100px;
            margin: 0;
            padding: 0;
        }

        #image {
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="dropzone">
        <p>
            将psd文件拖到这,发现奇迹
        </p>
    </div>

    <div id="image"></div>
    <pre id="data"></pre>



</body>
</html>