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

22,491 Responses

  1. Mazraly表示:

    Привет!
    Полезные советы по покупке диплома о высшем образовании без риска
    fr7913hk.bget.ru/news.php?readmore=31

  2. vavada_cgSl表示:

    Попробуй свою удачу в Vavada Casino и стань богаче, получай удовольствие.
    Выбери Vavada и окунись в мир азарта, играй по-крупному.
    Vavada – это возможность почувствовать волнение, делай выигрышные ставки.
    Быстрый старт в мире азарта с Vavada, начни игру.
    Vavada Casino – это тысячи возможностей к победе, сыграй и проверь свою удачу.
    Vavada: казино с большими возможностями для выигрыша, играй и выигрывай.
    Разбогатей с первого дня в Vavada, начни игру с лучшими условиями.
    Ставь на свою удачу с Vavada, стремись к победе.
    casino vavada зеркало https://vavadakiev.vavada-casino.com.ua/ .

  3. Lazrtxv表示:

    Здравствуйте!
    Купить диплом о высшем образовании.
    telegra.ph/stoimost-obucheniya-v-vuzah-voronezha-08-02

  4. Lazrrno表示:

    Привет!
    Купить диплом любого университета.
    telegra.ph/kak-organizovat-distancionnoe-obuchenie-v-vuze-08-02

  5. DouglasGed表示:

    cheap erection pills: Best ED pills non prescription – cheap ed medication

  6. Cazronz表示:

    Здравствуйте!
    Мы готовы предложить документы техникумов
    fire-team.ru/forum/showthread.php?p=39930#post39930

  7. Cazrapi表示:

    Привет, друзья!
    Мы предлагаем документы ВУЗов
    dv1930.ru/konkurs/vnimanie-novyj-konkurs-ot-dvinovazhya-cvetochnye-radosti-vinogradovskogo-rajona/#comment-519763

  8. Mazrkxl表示:

    Добрый день!
    Как получить диплом техникума с упрощенным обучением в Москве официально
    masterplus2014.blogspot.com/2014/12/blog-post

  9. Mazrksb表示:

    Привет, друзья!
    Как безопасно купить диплом колледжа или ПТУ в России, что важно знать
    sskyn.com/home-uid-84192

  10. Leonardpar表示:

    http://mexicopharmacy.win/# mexican drugstore online

  11. Mazrcax表示:

    Привет!
    Официальная покупка аттестата о среднем образовании в Москве и других городах
    forsistagangen.blogspot.ru/2013/09/vecka-20-dag-135

  12. AujikHesia表示:

    The medical information provided on this website is of a general nature and can not substitute for the advice of a medical professional for example, a qualified doctor or physician!
    if you do it via the web | Benefiting from risk free remedy? glucophage periods ? Find out the truth right here.
    Appendicitis in the presence of other illnesses may result in an atypical clinical presentation.

  13. PatrickKeymn表示:

    трубные решетки теплообменных аппаратов трубная решетка

  14. vo_ntorg_djPt表示:

    Выбор всегда за вами: лучший арсенал для военных, администрируйте.
    Секрет успеха каждого воинского подразделения: качественное снаряжение, только у нас.
    Военная техника для настоящих профессионалов, заказывайте.
    Как выбрать идеальное снаряжение для задач, приобретайте.
    Оптимальное снаряжение для военных целей, только у нас.
    Огнестрельное оружие для спецназа и армии, исключительно у проверенных поставщиков.
    Экипировка для самых опасных миссий: делайте свой выбор, только у проверенных поставщиков.
    Лучшие модели военной техники для самых требовательных, используйте.
    Оптимальное снаряжение для профессиональных военных действий, только у проверенных поставщиков.
    військовий одяг інтернет магазин військовий одяг інтернет магазин .

  15. Lariorbvz表示:

    Привет!
    Приобрести диплом ВУЗа.
    telegra.ph/posovetujte-gde-kupit-diplom-08-13-9

  16. Lariortac表示:

    Привет!
    Приобрести диплом о высшем образовании.
    telegra.ph/kupit-diplom-mehanika-08-13-2

  17. Uazrjdt表示:

    Добрыйдень!
    Заказать диплом о высшем образовании.
    telegra.ph/kupit-diplom-arhitektora-08-13-8

  18. Jariorryx表示:

    Привет, друзья!
    Купить диплом любого ВУЗа
    telegra.ph/kupit-diplom-v-arzamase-08-13-6

  19. Jariorfah表示:

    Добрый день!
    Заказать диплом о высшем образовании
    telegra.ph/kupit-diplom-vo-vladimire-08-13-2

  20. Larioronw表示:

    Привет!
    Купить диплом о высшем образовании.
    telegra.ph/kupit-ukrainskij-diplom-v-moskve-08-13-3

  21. Cazrvnb表示:

    Привет!
    Мы можем предложить документы ВУЗов
    telegra.ph/diplom-srednego-obrazovaniya-kupit-08-13

  22. Cazrjjy表示:

    Привет!
    Мы предлагаем документы ВУЗов
    telegra.ph/diplom-vospitatelya-kupit-08-13-8

  23. Uazrntg表示:

    Добрыйдень!
    Заказать диплом о высшем образовании.
    telegra.ph/kupit-diplom-vladimir-08-13-4

  24. Jariorsxs表示:

    Привет!
    Купить диплом о высшем образовании
    telegra.ph/vozmozhno-li-kupit-diplom-08-13-5

  25. Cazryhq表示:

    Добрый день!
    Мы готовы предложить документы техникумов
    telegra.ph/kupit-provedennyj-diplom-vuza-08-13-2

發佈留言

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