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

1,301 Responses

  1. DavidLek表示:

    п»їed drugs online from canada comfortis without vet prescription

  2. DustinIsolo表示:

    https://medrxfast.com/# buy prescription drugs from canada cheap

  3. Lesliepisn表示:

    online casinos for real money
    bonus casino online
    online casino usa

  4. Ruxult表示:

    ondansetron 8mg for sale purchase zofran without prescription propecia 1mg usa

  5. Uyhozt表示:

    zofran 4mg ca aldactone 100mg generic finasteride online order

  6. DarnellKar表示:

    online canadian drugstore prescription without a doctor’s prescription

  7. Thomassax表示:

    https://medrxfast.com/# comfortis for dogs without vet prescription

  8. DarnellKar表示:

    non prescription ed drugs non prescription ed drugs

  9. DustinIsolo表示:

    https://medrxfast.com/# canadian pharmacy

  10. Ancak, bilgi eksikliğinden dolayı çok sayıda entelektüel çalışma insanların gözlerinden gizlendiğinden, bu iki terim arasındaki farkı ve
    bunların uygulanma koşullarını açıklığa kavuşturmak çok önemlidir.
    Daha fazla okuma: Fayda ve Tasarım Patenti Arasındaki Fark; Patent ve Marka Arasındaki Fark.

  11. Bobbiepisn表示:

    best online us casinos
    best online blackjack
    online casino free bonus no deposit

  12. Bobbiepisn表示:

    online american casinos
    online slots real money free bonus
    online casinos

  13. Rgztfr表示:

    buy zantac generic mobic canada buy flomax 0.2mg generic

  14. Bobbiepisn表示:

    online mobile casinos
    biggest online casino bonuses
    united states online casino

  15. I am very happy to look your post. Thanks a lot and i am taking a look ahead to touch you.

  16. Williamral表示:

    https://drugsbestprice.com/# ed meds online without prescription or membership

  17. Wmypar表示:

    order generic ranitidine 300mg purchase flomax online flomax for sale

  18. Williamral表示:

    https://drugsbestprice.com/# drug medication

  19. Uvvvnr表示:

    order ranitidine 150mg celecoxib ca tamsulosin 0.2mg over the counter

  20. Jamesmib表示:

    ed meds vitamins for ed

  21. GerardPoema表示:

    https://drugsbestprice.com/# levitra without a doctor prescription

  22. Jamesmib表示:

    what is the best ed pill best erection pills

  23. Pearlpisn表示:

    online casino game real money
    online gambling for real money
    online us casinos

  24. Pearlpisn表示:

    best online casino reviews
    no deposit bonuses
    casino bonuses online

  25. Search Albertsons locations for pharmacies, weekly deals on fresh produce,
    meat, seafood, bakery, deli, beer, wine and liquor, and fuel stations nearby.

  26. JamesCof表示:

    ed causes and cures ed clinic

發佈留言

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