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

  1. Feel free to surf to my web page :: Find top-rated certified
    Daycares in your area (yrchurch.peopleweb.biz)

  2. Тактичный гардероб для стильных людей, тактичные костюмы.
    Лучшие магазины тактичной одежды, которые должен знать каждый.
    Тактичные наряды для повседневной носки, на этот сезон.
    Как сделать акцент на тактичной одежде, для создания армейского образа.
    Секреты удачного выбора тактичной одежды, для создания тенденций.
    тактичний одяг мультикам тактичний одяг мультикам .

  3. Получите эксклюзивный cryptoboss casino промокод|Новый промокод для cryptoboss casino
    Бонусный код для cryptoboss casino|Увеличьте свой выигрыш с cryptoboss casino промокодом
    Успейте воспользоваться привилегией cryptoboss casino промокода|Играйте в cryptoboss casino с бонусным кодом
    cryptoboss casino промокод – ваш ключ к выигрышу|Бонус при регистрации в cryptoboss casino с промокодом
    cryptoboss промокод hds5 криптобосс промокод на дополнительные акции hds5 .

    Играйте в cryptoboss casino с преимуществом промокода
    Воспользуйтесь промокодом в cryptoboss casino для дополнительных выигрышей
    Регулярные акции и промокоды для cryptoboss casino|cryptoboss casino – преимущества промокодов
    Играйте в cryptoboss casino с бонусным промокодом для победы|Получите дополнительные бонусы с cryptoboss casino промокодом|Специальное предложение для игроков cryptoboss casino: промокод|Уникальное предложение от cryptoboss casino с промокодом|Играйте в cryptoboss casino с эксклюзивным промокодом для успеха|cryptoboss casino – играйте с преимуществами промокода|Эксклюзивный cryptoboss casino промокод – ваш путь к победе|Используйте промокод в cryptoboss casino для больших побед|cryptoboss casino – ваша удача по промокоду|Увеличьте свои шансы на победу с промокодами от cryptoboss casino|Играйте в cryptoboss casino с преимуществами промокода|Используйте промокод в cryptoboss casino для больших выигрышей|Бонусы и скидки с cryptoboss casino промокодом|Успейте активировать cryptoboss casino промокод для дополнительных выигрышей|Используйте cryptoboss casino промокод для увеличения шансов на победу|cryptoboss casino – ваш ключ к успеху с промокодами|Увеличьте свои шансы на победу в cryptoboss casino с промокодом|Эксклюзивный cryptoboss casino промокод – ваш путь к выигрышу

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

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

  6. Bobbyrip表示:

    Уборка складских помещений СПб https://uborka-sklada-spb.ru/

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

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

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

  10. AndrewGlork表示:

    Admiral

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

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

  13. DouglasHoapy表示:

    1xBet
    1xBet offers daily promo codes that provide bonuses such as free bets, deposit matches, or free spins. These codes are valid for the day they are issued and can be used to boost your betting experience.

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

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

  16. uxszysgoy表示:

    Christian music. Foxes. Washington capitals. Timbuktu. Mulberry. Martial law. Emma watson. https://2480.g-u.su/

  17. Pablo表示:

    my page – Pablo

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

  19. DouglasAmevy表示:

    Azino

  20. Bobbyrip表示:

    Помыть склад в СПб https://uborka-sklada-spb.ru/

  21. Andreproda表示:

    Уборка квартиры после канализационного залива https://klining-posle-zaliva-moskva.ru/

  22. JosephFam表示:

    buy rybelsus: rybelsus – buy semaglutide online

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

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

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

  26. JosephFam表示:

    Buy compounded semaglutide online: rybelsus – Semaglutide pharmacy price

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

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

發佈留言

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