透過網頁讀取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...

516 Responses

  1. Very Interesting Information! Thank You For Thi Information!

  2. GeorgegaifF表示:

    where to buy clomid in singapore clomid capsules

  3. RobertBet表示:

    doxycycline 100mg without a prescription buy doxycycline capsules

  4. RobertBet表示:

    amoxicillin 500mg pill can you buy amoxicillin uk

  5. Bsedoi表示:

    accutane 10mg usa – purchase accutane sale buy tetracycline 250mg

  6. Stepheninsug表示:

    https://clomidforsale.life/# clomid medicine online

  7. Stepheninsug表示:

    https://prednisoneforsale.store/# buy 10 mg prednisone

  8. GeorgegaifF表示:

    how much is prednisone 10mg order prednisone 100g online without prescription

  9. Ngybyw表示:

    buy provigil pills – deltasone over the counter buy budesonide generic

  10. ShelbyImimb表示:

    buy clomid 150mg buy clomid online safely

  11. Lsaqlv表示:

    order modafinil 100mg pill – buy ed pills gb budesonide tablet

  12. RobertBet表示:

    buy amoxicillin 500mg canada purchase amoxicillin online without prescription

  13. Stepheninsug表示:

    https://zithromaxforsale.shop/# buy zithromax canada

  14. ShelbyImimb表示:

    amoxicillin 500mg capsule buy online amoxicillin buy online canada

  15. RobertBet表示:

    buy prednisone online from canada prednisone 80 mg daily

  16. Hi there, just became aware of your blog through Google, and found that it’s truly informative. It’s important to cover these trends.

  17. GeorgegaifF表示:

    can you buy prednisone over the counter 20 mg of prednisone

  18. RaymondCrype表示:

    amoxicillin 500mg without prescription buy amoxicillin 500mg online

  19. Rhnjkp表示:

    order modafinil 200mg online cheap – order generic budesonide buy generic budesonide

  20. Rogerhoozy表示:

    generic amoxicillin over the counter amoxicillin in india

  21. GeorgegaifF表示:

    clomid medication online can you buy clomid without a prescription

  22. Qydboq表示:

    order sildenafil 150mg online – cialis 5mg ca us pharmacy cialis

  23. Ixodlq表示:

    viagra 50mg pills for men – order cialis 20mg online cheap order tadalafil 5mg for sale

  24. This blog post is excellent, probably because of how well the subject was developed. I like some of the comments too though I could prefer we all stay on the subject in order add value to the subject!

  25. Michaellow表示:

    viagra cost per pill viagra online usa

  26. Great blog here! Additionally your website rather a lot up very fast! What host are you the usage of? Can I get your associate link for your host? I desire my website loaded up as fast as yours lol

發佈留言

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