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

299 Responses

  1. Phxglb表示:

    order doxycycline 100mg online – order cialis 10mg generic buy cialis without prescription

  2. CraigDor表示:

    where to buy viagra online sildenafil citrate tablets 100 mg viagra from canada

  3. Tyquwt表示:

    stromectol 0.1 – buy levitra 20mg online levitra 20mg uk

  4. Hnunjj表示:

    ivermectin 6mg oral – ivermectin cost uk buy levitra 20mg online

  5. Jamested表示:

    stromectol without prescription stromectol tablets for humans ivermectin rosacea before and after

  6. Kyjxxx表示:

    ivermectin 6 mg without prescription – ivermectin for sale online cheap vardenafil 10mg

  7. Jamested表示:

    stromectol tablets for humans stromectol for humans for sale stromectol for humans for sale

  8. Vbcjqc表示:

    amoxicillin 500mg drug – buy vardenafil generic order levitra 20mg without prescription

  9. Gqvtxf表示:

    buy amoxicillin 250mg sale – vardenafil uk vardenafil 20mg over the counter

  10. Jamested表示:

    stromectol tablets for humans stromectol for humans for sale stromectol for humans for sale

  11. Xfpuff表示:

    order amoxil 1000mg sale – order amoxil 1000mg online cheap vardenafil cheap

  12. Jamested表示:

    stromectol for sale stromectol 12 mg tablets stromectol 12 mg tablets

  13. MichaelPlela表示:

    sildenafil 100 mg sildenafil 100 mg sildenafil citrate tablets 100 mg

  14. Gqsdxg表示:

    oral ampicillin – ampicillin buy online order cialis 40mg pills

  15. MichaelPlela表示:

    cialis pharmacy generic tadalafil 20mg india generic tadalafil 20mg india

  16. Enybaf表示:

    acillin sale – buy acillin pill order cialis without prescription

  17. MichaelPlela表示:

    buy clomid 50mg buy clomid 50mg online clomid tablets

  18. Moxixf表示:

    ampicillin pills – order ampicillin 500mg cialis 10mg us

  19. MichaelPlela表示:

    where to buy cheap clomid online clomid for sale where to buy cheap clomid online

  20. aleiphil表示:

    If you’ve got problems, you may want to refer to the troubleshooting section of the website to find out how to solve them.
    Requirements
    In order for Leitner Box to work properly, you need to be running some of the latest Microsoft.NET Framework SDK versions.
    Win x64 Only
    OS : Windows 7 or higher
    PC : Intel Core 2 Duo or higher
    JRE : Java Runtime Environment 1.8 or higher
    JavaME
    Note that this app has been https://wakelet.com/wake/EvRqyAPZ3PTdba7jQ7ON7 8cee70152a aleiphil

  21. ilysgavr表示:

    It is a simple and an easy-to-handle app for retrieving the SMSes. The application is designed in a very simple fashion and it comes with an intuitive interface. If the sms.db file is not included in the program itself, then you can use the iTunes backup functionality to retrieve the database. With a simple backup tool, you can export the MSG file from your android and then read and save them on your computer.
    Storing SMSes on your computer is a great thing https://ainocafe.com/upload/files/2022/05/yz9uCsn9ogIiUaLxMcXj_19_d03d0450e39a40cdc65dafaed021e1c0_file.pdf 05e1106874 ilysgavr

  22. nkuntra表示:

    ■ Access Path: C:\ – The original Word documents can be saved on the root drive. Other paths can be used.
    ■ Read more below…
    ■ Demo mode: – Fully functional demo. Please run the demo once to familiarize with the free trial. Demo mode can be disabled in the settings.
    ■ Sign up – Please sign up for a free account. After signing up you can use the product for 30 days.
    License:Free https://pra-namorar.paineldemonstrativo.com.br/upload/files/2022/05/rfdJexp5T4npaEQEdYeQ_19_c333eae3e4914017c43137a927bc66f1_file.pdf 05e1106874 nkuntra

  23. Ikqigs表示:

    ceftin 500mg for sale – generic ceftin 250mg tadalafil 20mg over the counter

  24. Vzonih表示:

    buy ceftin 250mg sale – ceftin over the counter tadalafil 40mg pills

發佈留言

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