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

  1. Also visit my page – Explore Daycares Locations (maps.google.com.gh)

  2. DouglasHoapy表示:

    1xBet
    Promo codes on 1xBet unlock a variety of bonuses, including deposit matches, free bets, and free spins. These codes can be used during registration or deposit to claim the corresponding bonus and boost your bankroll.

  3. ArnoldDRODA表示:

    ventolin online pharmacy: Ventolin inhaler – buy ventolin without prescription

  4. powerbank для авто chisinau powerbank для авто chisinau .

  5. Drapia.org表示:

    Here is my blog post – Daycares popular listings (Drapia.org)

  6. сервисный центре предлагает ремонт телевизора на дому в москве недорого – сколько стоит ремонт телевизора

  7. DouglasHoapy表示:

    1xBet
    1xBet regularly releases promo codes that provide users with bonuses like free bets, deposit matches, or free spins. These codes are a great way to boost your bankroll and increase your chances of winning.

  8. Gartandabsex表示:

    Как поднять настроение с помошью мемов. ржачные картинки
    https://www.remotecentral.com/cgi-bin/forums/members/viewprofile.cgi?ray6op

  9. Kennethtub表示:

    https://brufen.pro/# BRUFEN 600 bustine prezzo
    farmaci senza ricetta elenco

  10. Сервисный центр предлагает ремонт сигвеев windtech в петербурге сколько стоит ремонт сигвей windtech

  11. Профессиональный сервисный центр по ремонту компьютеров и ноутбуков в Москве.
    Мы предлагаем: ремонт макбука
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. Сервисный центр предлагает мастерские ремонта гироскутеров carcam качественый ремонт гироскутера carcam

  13. Your writing is so eloquent and polished. It’s clear that you’re a true master of your craft.

  14. Gartandabsex表示:

    Как поднять настроение с помошью приколов. Свежие мемы
    http://www.mrkineshma.ru/support/forum/view_profile.php?UID=228843

  15. Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в воронеже

  16. Профессиональный сервисный центр по ремонту компьютеров и ноутбуков в Москве.
    Мы предлагаем: ремонт macbook
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  17. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт бытовой техники в ростове на дону
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  18. Gartandabsex表示:

    Как поднять настроение с помошью смешных картинок. прикольные мемы
    https://modx.pro/users/vychislavyakov

  19. Сервисный центр предлагает починка электросамокатов mytoy ремонт электросамоката mytoy недорого

  20. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт техники в воронеже

  21. Если вы искали где отремонтировать сломаную технику, обратите внимание – профи ремонт

  22. Garlandabsex表示:

    Смешные мемы http://prikoly-shutki.ru/kartinki-prikolnye Что такое мемы.

  23. JacobGed表示:

    Используя промокод Мелбет при регистрации, игроки получают доступ к участию в приветственной бонусной программе. Полученные привилегии можно использовать, заключая ставки на ММА и другие виды спорта. Ниже рассказываем более подробно о том, какие бонусы предложены на сайте и как их отыграть. Бонусные программы нацелены на то, чтобы обеспечить для игроков возможность получить безболезненный опыт игры на сайте и сгладить первые возможные неудачи. Регистрируйтесь на платформе букмекера, активируйте промокод как ввести и пользуйтесь бонусными предложениями от букмекера Мелбет, чтобы получать больше положительных эмоций при заключении пари.

  24. Edgarappow表示:

    pillole per erezione in farmacia senza ricetta: viagra – viagra 50 mg prezzo in farmacia

  25. Armandosnot表示:

    Забавные видео на злобу дня
    Поднимите себе настроение!

  26. Сервисный центр предлагает сколько стоит ремонт посудомоечной машины kuppersbusch адреса ремонта посудомоечных машин kuppersbusch

發佈留言

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