透過網頁讀取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. RaymondCrype表示:

    https://buytadalafil.men/# tadalafil 5mg canada

  2. Anthonynug表示:

    https://buytadalafil.men/# buy tadalafil over the counter

  3. WilliamTraug表示:

    lasix 100mg lasix

  4. Dealzclick is one stop shop with the best online shopping deals today, offering Best travel deals and Best online webhosting dealsfrom trusted best sellers. We are all about deals.

  5. Edwarddaf表示:

    lipitor prescription lipitor online

  6. RonaldSnulk表示:

    https://buymetformin.best/# how to get metformin uk

  7. WilliamTraug表示:

    tamoxifen for sale tamoxifen breast cancer

  8. Xxjuco表示:

    plavix 150mg cost – buy methotrexate pill reglan 10mg without prescription

  9. RaymondCrype表示:

    https://buytadalafil.men/# cost of tadalafil generic

  10. RaymondCrype表示:

    https://buymetformin.best/# where to buy metformin 500 mg

  11. WilliamTraug表示:

    order tadalafil 20mg cheap tadalafil online

  12. Anthonynug表示:

    https://buytadalafil.men/# tadalafil – generic

  13. Homerphest表示:

    nolvadex pct п»їdcis tamoxifen

  14. Homerphest表示:

    best pharmacy buy tadalafil best online tadalafil

  15. Ncitcw表示:

    flexeril tablet – buy inderal 10mg online cheap buy inderal 20mg online

  16. Anthonynug表示:

    https://buylasix.icu/# lasix 100mg

  17. Anthonynug表示:

    https://buytadalafil.men/# tadalafil price

  18. Wwyyqv表示:

    buy cyclobenzaprine without prescription – toradol uk inderal buy online

  19. Loving the info on this website , you have done outstanding job on the blog posts.

  20. Jklzmf表示:

    buy flexeril online cheap – buy ketorolac inderal 20mg drug

  21. RaymondCrype表示:

    https://buymetformin.best/# where to buy metformin tablets

  22. Homerphest表示:

    lasix generic name furosemide 40mg

  23. Kstbif表示:

    order isotretinoin 10mg online – amoxil 500mg pills order tetracycline 500mg pill

  24. WilliamTraug表示:

    https://buynolvadex.store/# tamoxifen for sale

  25. Just stumble upon your blog from from time to time. nice article

  26. Aybrol表示:

    accutane 10mg cheap – zithromax over the counter buy tetracycline 500mg without prescription

  27. You are not right. I am assured. I can prove it. Write to me in PM, we will talk.

  28. DavidJex表示:

    metformin.com 134 metformin 500 mg

發佈留言

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