透過網頁讀取Photoshop PSD檔案內容

在專案中有需要透過網頁來讀取Photoshop PSD檔案的內部資訊,我們透過PSD.js備用載點)來實現這樣的功能,在官方提供的功能展示頁中,我們可以看到在頁面中只需引入psd.min.js後,加入透過少量的Javascript就可以針對PSD進行解析。

<!DOCTYPE html>
<html>
<head>
  <title>psd.js image example</title>
  <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>
  <script type="text/javascript" src="psd.min.js"></script>
</head>
<body>
  <div id="dropzone">
    <p>Drop here</p>
  </div>
  <div id="image"></div>
  <pre id="data"></pre>
  <script type="text/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());
      });
    }
  }());
  </script>
</body>
</html>

我們透過下圖這樣的一個PSD檔案對頁面進行測試,檔案中共有三個圖層,包含一個文字圖層。

頁面將PSD分析出結果後,以json格式顯示在頁面上,可以看到文字圖層的部分,不僅能讀到圖層名稱也包含文字內容和字型名稱。

{
  "children": [
    {
      "type": "layer",
      "visible": true,
      "opacity": 1,
      "blendingMode": "normal",
      "name": "Photoshop Text",
      "left": 302,
      "right": 723,
      "top": 90,
      "bottom": 128,
      "height": 38,
      "width": 421,
      "mask": {},
      "text": {
        "value": "THIS IS TEXT LAYER",
        "font": {
          "name": "MyriadPro-Regular\u0000",
          "sizes": [
            53
          ],
          "colors": [
            [
              0,
              0,
              0,
              255
            ]
          ],
          "alignment": [
            "center"
          ]
        },
        "left": 0,
        "top": 0,
        "right": 0,
        "bottom": 0,
        "transform": {
          "xx": 1,
          "xy": 0,
          "yx": 0,
          "yy": 1,
          "tx": 513,
          "ty": 127
        }
      },
      "image": {}
    },
    {
      "type": "layer",
      "visible": true,
      "opacity": 1,
      "blendingMode": "normal",
      "name": "PSD Icon",
      "left": 287,
      "right": 738,
      "top": 209,
      "bottom": 669,
      "height": 460,
      "width": 451,
      "mask": {},
      "image": {}
    },
    {
      "type": "layer",
      "visible": true,
      "opacity": 1,
      "blendingMode": "normal",
      "name": "Background",
      "left": 0,
      "right": 1024,
      "top": 0,
      "bottom": 800,
      "height": 800,
      "width": 1024,
      "mask": {},
      "image": {}
    }
  ],
  "document": {
    "width": 1024,
    "height": 800,
    "resources": {
      "layerComps": [],
      "guides": [],
      "slices": []
    }
  }
}

You may also like...

28,824 Responses

  1. Jerrybem表示:

    http://canadianpharm.store/# canadian drugs pharmacy canadianpharm.store

  2. MichaelRof表示:

    canada pharmacy 24h: Pharmacies in Canada that ship to the US – canada pharmacy reviews canadianpharm.store

  3. TimothyTUt表示:

    medicine in mexico pharmacies mexican rx online best online pharmacies in mexico mexicanpharm.shop

  4. TimothyTUt表示:

    mexican border pharmacies shipping to usa Certified Pharmacy from Mexico mexican mail order pharmacies mexicanpharm.shop

  5. Patrickces表示:

    https://canadianpharm.store/# northwest canadian pharmacy canadianpharm.store

  6. Mmnnnd表示:

    albuterol online buy order ventolin inhalator ventolin 4mg sale

  7. Charlesven表示:

    mexican pharmacy: Online Pharmacies in Mexico – medicine in mexico pharmacies mexicanpharm.shop

  8. Jerrybem表示:

    https://indianpharm.store/# best online pharmacy india indianpharm.store

  9. Charlesven表示:

    ed drugs online from canada: canadian pharmacy world reviews – is canadian pharmacy legit canadianpharm.store

  10. Jerrybem表示:

    http://indianpharm.store/# cheapest online pharmacy india indianpharm.store

  11. Patrickces表示:

    http://mexicanpharm.shop/# mexico pharmacies prescription drugs mexicanpharm.shop

  12. RamonHom表示:

    best india pharmacy: Indian pharmacy to USA – indian pharmacy paypal indianpharm.store

  13. Charlesven表示:

    pharmacy canadian superstore: Licensed Online Pharmacy – buying from canadian pharmacies canadianpharm.store

  14. TimothyTUt表示:

    canadian pharmacies vipps canadian pharmacy best online canadian pharmacy canadianpharm.store

  15. TimothyTUt表示:

    buying prescription drugs in mexico Certified Pharmacy from Mexico mexican rx online mexicanpharm.shop

  16. Jerrybem表示:

    http://mexicanpharm.shop/# mexican rx online mexicanpharm.shop

  17. Charlesven表示:

    mexican mail order pharmacies: Online Pharmacies in Mexico – medication from mexico pharmacy mexicanpharm.shop

  18. RamonHom表示:

    canadian drugs pharmacy: Canadian International Pharmacy – canadian pharmacy king reviews canadianpharm.store

  19. Jerrybem表示:

    https://indianpharm.store/# legitimate online pharmacies india indianpharm.store

  20. Charlesven表示:

    canadian pharmacy mall: Certified Online Pharmacy Canada – safe online pharmacies in canada canadianpharm.store

  21. MichaelRof表示:

    indian pharmacy online: international medicine delivery from india – buy prescription drugs from india indianpharm.store

  22. Jerrybem表示:

    http://indianpharm.store/# reputable indian online pharmacy indianpharm.store

  23. Charlesven表示:

    best india pharmacy: international medicine delivery from india – cheapest online pharmacy india indianpharm.store

  24. TimothyTUt表示:

    reputable mexican pharmacies online buying prescription drugs in mexico online mexico pharmacies prescription drugs mexicanpharm.shop

  25. TimothyTUt表示:

    mexican pharmacy Online Pharmacies in Mexico reputable mexican pharmacies online mexicanpharm.shop

  26. Jerrybem表示:

    http://canadianpharm.store/# canadian drug canadianpharm.store

  27. MichaelRof表示:

    my canadian pharmacy: Canadian International Pharmacy – best canadian pharmacy online canadianpharm.store

  28. Charlesven表示:

    canadian pharmacy victoza: Canadian Pharmacy – canadian medications canadianpharm.store

  29. Jerrybem表示:

    https://canadianpharm.store/# canadian pharmacy ratings canadianpharm.store

  30. Charlesven表示:

    medicine in mexico pharmacies: п»їbest mexican online pharmacies – mexican rx online mexicanpharm.shop

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。