requirejs & psd.js

use psd.js as requirejs module

by Abdessamad Idrissi

HTML

<script src="//cdn.bootcss.com/psd.js/3.1.0/psd.js"></script>
 <p style="text-align:center;">You can use this psd file as a test <a href="https://www.dropbox.com/s/f4dam7uspv55lga/github-logo.psd?dl=0" target="_blank">github-logo.psd</a></p>
 
 <div id="dropzone">
    <p>Drop here</p>
  </div>
  
  <div id="image"></div>
  <pre id="data"></pre>

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

JavaScript

(function () {
    var PSD = require('psd');

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

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