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

29,213 Responses

  1. Berniece表示:

    Feel free to visit my page: Find top-rated certified Daycares in your area (Berniece)

  2. Cumyrq表示:

    flagyl tablet – order flagyl 200mg generic cenforce medication

  3. ForrestVal表示:

    пин ап казахстан: пин ап 634 – пин ап казино

  4. Сервисный центр предлагает замена переднего стекла fly iq4400 nano 8 замена тачскрина fly iq4400 nano 8

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

  6. Santopax表示:

    https://pinupturkey.pro/# pin up casino guncel giris

  7. DonaldRer表示:

    pinup azerbaycan: pin up azerbaijan – pin-up kazino

  8. Santopax表示:

    https://pinupturkey.pro/# pin up aviator

  9. DonaldRer表示:

    pin up bet: pin up bet – pin up guncel giris

  10. Davidcak表示:

    нажмите, чтобы подробнее Kraken20.at

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

  12. LeroyAcuff表示:

    Профессиональный сервисный центр ремонт сотовых телефонов в москве ближайший ремонт смартфонов

  13. ForrestVal表示:

    pin up giris: pin up – pin-up casino giris

  14. В магазине сейфов предлагают сейфы второго класса купить сейф 2 класс

  15. В магазине сейфов предлагают купить сейф 2 cейфы 2 класс

  16. Robertdef表示:

    pin-up casino giris pin up pin up casino

  17. DonaldRer表示:

    pinup az: pin-up kazino – pin-up casino giris

  18. Robertdef表示:

    pinup azerbaycan pinup az pin up casino

  19. DonaldRer表示:

    pin up: pin-up casino giris – pin up

  20. В магазине сейфов предлагают сейф 2 класса сейф 2 класса

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

  22. В магазине сейфов предлагают взломостойкие сейфы 2 класса купить сейф 2

  23. ForrestVal表示:

    pin up casino guncel giris: pin-up bonanza – pin up casino

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

  25. DouglasHoapy表示:

    1xBet Promo Codes https://idematapp.com/wp-content/pages/1xbet_promo_codes_free_bonus_offers.html
    1xBet promo codes are special codes that unlock bonuses like free bets, deposit matches, or free spins. These codes can be entered during registration or deposit to claim the corresponding bonus.

發佈留言

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