透過網頁讀取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,748 Responses

  1. Louishycle表示:

    mexican drugstore online mexican border pharmacies shipping to usa best mexican online pharmacies

  2. JerryMig表示:

    mexican border pharmacies shipping to usa pharmacies in mexico that ship to usa п»їbest mexican online pharmacies

  3. JerryMig表示:

    mexican border pharmacies shipping to usa mexico pharmacy medication from mexico pharmacy

  4. TravisNOb表示:

    http://mexicanph.shop/# buying prescription drugs in mexico
    mexican rx online

  5. Louishycle表示:

    buying prescription drugs in mexico online mexico drug stores pharmacies mexican drugstore online

  6. WilliamSoorp表示:

    https://medicinefromindia.store/# pharmacy website india

  7. Eugenehaupe表示:

    best online pharmacy india online pharmacy india best india pharmacy

  8. Eugenehaupe表示:

    ed meds online erectile dysfunction pills non prescription ed pills

  9. Yezmny表示:

    buy generic rybelsus generic semaglutide 14 mg buy rybelsus 14 mg generic

  10. WilliamSoorp表示:

    http://certifiedpharmacymexico.pro/# mexico pharmacies prescription drugs

  11. WilliamSoorp表示:

    https://canadianinternationalpharmacy.pro/# canada rx pharmacy world

  12. Eugenehaupe表示:

    canadian pharmacies compare canadian family pharmacy canada drugs online reviews

  13. Xlbgkx表示:

    doxycycline pill monodox cheap order vibra-tabs online

  14. Eugenehaupe表示:

    ed medication ed treatment review best ed pill

  15. WilliamPaw表示:

    https://medicinefromindia.store/# Online medicine home delivery

  16. WilliamSoorp表示:

    http://edwithoutdoctorprescription.pro/# prescription drugs online

  17. BennyNib表示:

    levitra without a doctor prescription: cheap cialis – prescription meds without the prescriptions

  18. WilliamSoorp表示:

    http://medicinefromindia.store/# best online pharmacy india

  19. WilliamPaw表示:

    https://medicinefromindia.store/# indian pharmacies safe

  20. It¦s really a great and helpful piece of info. I¦m satisfied that you simply shared this useful information with us. Please stay us informed like this. Thank you for sharing.

  21. Eugenehaupe表示:

    top 10 online pharmacy in india buy medicines online in india п»їlegitimate online pharmacies india

  22. Eugenehaupe表示:

    online pharmacy india india pharmacy india online pharmacy

  23. BennyNib表示:

    pharmacies in mexico that ship to usa: buying from online mexican pharmacy – buying from online mexican pharmacy

  24. WilliamSoorp表示:

    http://edpill.cheap/# ed remedies

  25. WilliamSoorp表示:

    https://canadianinternationalpharmacy.pro/# reliable canadian online pharmacy

  26. Ded表示:

    Since the game chips are purchased with real money and are used to wager for more chips, the plaintiffs contend the casino mobile apps represent illegal gambling schemes. These apps allegedly violate Washington’s gambling laws and, therefore, plaintiffs say that they are entitled to recover the illegal profits gained by DoubleDown Interactive. DoubleDown_Casino.apk, DoubleDown_Casino-4.9.61.apk Formerly Twin River Casino Hotel Aug 03, 2021 (Gmt+09:00) Formerly Twin River Casino Hotel Yes. Double Down Casino is a secure and fair social casino that provides a risk-free way to enjoy online casino games. The site makes use of SSL encryption technology and is legal in 49 states. 01. Collect 40,000+ Free Chips 02. Collect 39,999+ Free Chips 03. Collect 40,000+ Free Chips 04. Collect 39,999+ Free Chips 05. Collect 40,000+ Free Chips 06. Collect 39,999+ Free Chips
    http://bbs.gurusemi.com/member.php?action=profile&uid=40825
    Receive your exclusive bonuses! İl Emniyet Müdürlüğü’nde görevli 21 polis müdürü ve emniyet amiri başka illere tayin edilirken 7 emniyet müdürü ile 5 emniyet amiri İstanbul’a atandı ABD Federal Soruşturma Bürosu Başkanı ve İngiltere İç İstihbarat Servisi Başkanı, ilk kez beraber açıklama yaptı. Batı’nın güvenliğine yönelik en tehlikeli uzun vadeli tehdidin Çin olduğu uyarısında… İl Emniyet Müdürlüğü’nde görevli 21 polis müdürü ve emniyet amiri başka illere tayin edilirken 7 emniyet müdürü ile 5 emniyet amiri İstanbul’a atandı Players who sign up for the first time at Royal Ace may get a $25 no-deposit bonus. All you have to do is sign up for an account at the Royal Ace Casino and use the promo code ROYALTY25 during registration. This will give you a $25 free chip that may be used to play several of the slots on the site.

  27. Eugenehaupe表示:

    erectile dysfunction medicines buy ed pills online medicine for erectile

  28. Eugenehaupe表示:

    medicine for impotence top ed drugs cheapest ed pills online

  29. WilliamSoorp表示:

    https://medicinefromindia.store/# indian pharmacy paypal

  30. WilliamSoorp表示:

    http://edpill.cheap/# mens ed pills

發佈留言

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