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

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

  2. Jeremypag表示:

    ozempic cost ozempic online buy ozempic

  3. Timsothyabela表示:

    Pretty! This was an incredibly wonderful article. Many thanks for supplying this info.

    1xbet sri lanka

  4. FobertWen表示:

    Wow that was odd. I just wrote an very long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say wonderful blog!

    1xbet india

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

  6. RamonRek表示:

    buy ozempic: ozempic generic – buy ozempic

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

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

  9. NathanHip表示:

    Descubra o horário de brasília e tenha a certeza de estar sempre no fuso horário correto. Perfeito para quem vive ou trabalha na capital e precisa de pontualidade!

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

  11. Jasonnix表示:

    капельницы после запоя на дому https://lecheniealkgolizma.ru/

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

  13. Armandoknot表示:

    Как поднять себе настроение? Почитайте
    прикольные анекдоты и поделитесь с близкими.

  14. RamonRek表示:

    buy semaglutide pills: semaglutide cost – semaglutide cost

  15. Raymondgeala表示:


    Продажа мини-погрузчиков Lonking

    Продажа мини-погрузчиков Lonking на территории России от официального
    дистрибьютора. Новая многофункциональная техника для любых задач.
    Наши машины предназначены для того, чтобы упростить вашу работу:
    от строительных площадок до складских операций.

    Высокая эффективность, надежность и инновационные решения — все,
    что вам нужно для успешных проектов. Погрузите свой бизнес в будущее
    с мини-погрузчиками Lonking!

    47% российских покупателей выбрали мини-погрузчики Lonking в 2023 году продано более 1200 единиц.
    Мини-погрузчики Lonking

  16. KennethBrode表示:

    просушка натяжного потолка цена https://sushka-pomeshchenij-v-msk.ru/

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

  18. BarryDof表示:

    https://rybelsus.shop/# semaglutide tablets

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

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

  21. Frankevild表示:

    http://rybelsus.shop/# semaglutide online

  22. HaroldBig表示:

    buy semaglutide pills: rybelsus cost – semaglutide online

  23. Frankevild表示:

    https://rybelsus.shop/# buy rybelsus online

  24. Jeremypag表示:

    rybelsus price rybelsus price cheapest rybelsus pills

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

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

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

  28. Jeremypag表示:

    rybelsus cost buy rybelsus online buy semaglutide pills

發佈留言

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