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

  1. Тут делают продвижение медицинский seo медицинское seo

  2. SteveRib表示:

    A severe geomagnetic storm could cause colorful auroras over Northern California and Alabama
    пидар
    Colorful auroras could be visible in areas of the United States such as Alabama and Northern California — much farther south than they typically appear — on Thursday evening due to a powerful solar flare and coronal mass ejection released from the sun, according to the National Weather Service’s Space Weather Prediction Center.

    The severe solar storm, classified as a level 4 on a scale from 1 to 5, also could disrupt communications, the power grid and satellite operations, according to officials at the center.

    The storm is expected to reach Earth between early morning and 12 p.m. ET Thursday, with the potential to last through Friday.

    The intensity and full characteristics of the storm, moving toward Earth at more than 2.5 million miles per hour (about 4 million kilometers per hour), won’t be known until it reaches the Deep Space Climate Observatory and the Advanced Composition Explorer satellites orbiting 1 million miles from Earth.

    The satellites will measure the speed and magnetic intensity of the storm, which is expected to arrive at Earth 15 to 30 minutes after reaching the space observatories, said Shawn Dahl, service coordinator for the Space Weather Prediction Center, at a news briefing Wednesday.

    A series of the most intense type of solar flares, known as X-class flares, have released from the sun this week. The flares also coincided with coronal mass ejections on Tuesday.

    Coronal mass ejections are large clouds of ionized gas called plasma and magnetic fields that erupt from the sun’s outer atmosphere. When these outbursts are directed at Earth, they can cause geomagnetic storms, or major disturbances of Earth’s magnetic field.

    “Geomagnetic storms can impact infrastructure in near-Earth orbit and on Earth’s surface,” according to the Space Weather Prediction Center.

    As a result, the center has notified the Federal Emergency Management Agency, the North American power grid and satellite operators to prepare for disruptions, especially given the amount of preparations and expected relief efforts for Hurricane Milton, Dahl said.

    Historically, G4 storms are common during a solar cycle, but G5, or extreme geomagnetic storms such the one that occurred on May 10, are incredibly rare, Dahl said. This new storm has a 25% chance of becoming a G5, he said.

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

  4. Тут делают продвижение разработка сайта клиники разработка медицинского сайта

  5. Отличный сайт! Всем рекомендую!Оптика СПб

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

  7. Тут делают продвижение разработка медицинского сайта разработка сайт медицинской клиники

  8. Тут делают продвижение seo медицинских сайтов сео продвижение медицинского сайта

  9. Thomasthima表示:

    играть в слоты

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

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

  12. смотреть фильм бесплатно веном смотреть фильм веном 2 в хорошем качестве веном 2 скачать

  13. NicolasLoole表示:

    https://semaglutide.win/# rybelsus

  14. Тут делают продвижение создание медицинского сайта под ключ создание медицинских сайтов под ключ

  15. Тут делают продвижение создание медицинских сайтов под ключ разработка медицинского сайта

  16. Тут делают продвижение сео медицина медицинский seo

  17. Kelvinjuile表示:


    Интернет-магазин плитки и керамики «ИнфоПлитка»

    Интернет-магазин керамической плитки и керамогранита «Infoplitka» (infoplitka.ru)
    предлагает широкий ассортимент высококачественной плитки и керамогранита от ведущих производителей.
    Мы стремимся предложить нашим клиентам только лучшее, поэтому в ассортименте представлены товары,
    отвечающие самым высоким стандартам качества и дизайна.

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

  18. Michaelgax表示:

    buy neurontin online uk buy gabapentin neurontin 300 mg tablet

  19. LarryND表示:

    онлайн казино с депозитом
    казино играть онлайн

  20. Тут делают продвижение создание медицинского сайта разработка сайта медицинской клиники

  21. Тут делают продвижение создание сайта под ключ для медицинского учреждения создание сайта клиники

  22. Тут делают продвижение сео продвижение медицинских сайтов seo. медицинских. сайтов

  23. Тут делают продвижение разработка сайта медицинской клиники разработка сайтов медицинских организаций

  24. PokerTube表示:

    Take a look at my site – PokerTube

  25. Ремонт телефонов表示:

    Профессиональный сервисный центр ремонт телефонов поблизости от меня ремонт мобильных устройств

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

  27. Тут делают продвижение разработка сайт медицинского центра создание сайта для медицинского центра

發佈留言

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