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

  1. Lazrbhh表示:

    Привет, друзья!
    Мы готовы предложить дипломы любой профессии по невысоким ценам.
    telegra.ph/vuzy-ssha-postuplenie-08-02

  2. Dqwldg表示:

    buy imusporin without prescription – brand colcrys buy colchicine generic

  3. My page Explore Daycares Locations – old.remain.co.kr

  4. DouglasGed表示:

    mexican border pharmacies shipping to usa: purple pharmacy mexico price list – best online pharmacies in mexico

  5. продвижение сайта в интернете москва продвижение сайта в интернете москва .

  6. AxxzPaish表示:

    More about badges Request a badgeMore about badges Request a badgeMore about badges Request a badgeThis commenter is a Washington Post contributor.
    discounted prices from respectable pharmacies before you prednisone pregnancy category at superb savings to help minimize symptoms and feel healthier
    The use of intravenous fluids to improve volume status is reasonable given Marcus’ inability to maintain hydration with ORS.

  7. Отличный сайт! Всем рекомендую!заказать вывеску тюмень

  8. MalcolmAdugs表示:

    Инфа https://pg-soft-game.ru/

  9. seo оптимизация и продвижение сайтов москва https://prodvizhenie-sajtov13.ru/ .

  10. GarrettBic表示:

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

    Основные направления деятельности компании:

    оказание юридических услуг организациям;
    правовая поддержка физических лиц;
    регистрационные действия и ликвидация.
    Каждый специалист имеет специализацию в области права и большой практический опыт. Средний стаж юридической практики наших адвокатов – 20 лет. Гарантией победы в решении сложнейших дел клиентов является грамотный подход, богатый профессиональный и жизненный опыт наших адвокатов. Мы с гордостью отмечаем высокие компетенции специалистов, что подтверждается положительными отзывами наших клиентов и доверительными отношениями с ними.

    Более половины клиентов МИП в дальнейшем регулярно обращаются к нам за юридической консультацией.

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

    Мы уверены, что выбор адвоката строится на основании доверия к нему, поэтому стремимся не допускать расхождения слов с делом.

  11. Diplomi_fnEa表示:

    Здравствуйте!
    Купить документ института можно у нас в столице.
    swissbankinginfo.blogspot.com/2019/01/blog-post_84

  12. Diplomi_baEa表示:

    Привет!
    Заказать документ о получении высшего образования можно в нашей компании.
    s0628967.bget.ru/main/1-post1

  13. Diplomi_vyEa表示:

    Привет, друзья!
    Купить документ о получении высшего образования вы можете у нас.
    filmchik.3dn.ru/forum/5-41-1#3612

  14. Leonardpar表示:

    http://edpillpharmacy.store/# erectile dysfunction drugs online

  15. LouisAlubs表示:

    At the end of the day, don’t we all want to be happy? Here are 5 ways to get there
    адвокат по вопросам миграции
    Americans are really into pursuing happiness.

    What happiness means is different for each individual and may shift over a lifetime: joy, love, purpose, money, health, freedom, gratitude, friendship, romance, fulfilling work? All of the above? Something else entirely? Many have even suggested that while we may think we know what will make us happy, we are often wrong.

    One man may have cracked the code for what makes a happy and healthier life — and he has the data to back him up.

    Dr. Robert Waldinger is the director of the Harvard Study of Adult Development — possibly the longest-running longitudinal study on human happiness, which started back in 1938. (The original study followed two groups of males, Harvard College students and adolescents in Boston’s inner city. It was expanded in recent decades to include women and people of more diverse backgrounds.)

    Plenty of components are at play in the quest for a happier life, but the key comes down to one main factor: quality relationships.

    “What we found was that the important thing was to stay actively connected to at least a few people, because we all need a sense of connection to somebody as we go through life,” Waldinger told CNN Chief Medical Correspondent Dr. Sanjay Gupta recently on his podcast Chasing Life.

    “And the people who were connected to other people lived longer and stayed physically healthier than the people who were more isolated,” he said. “That was the surprise in our study: not that people were happier but that they lived longer.”

  16. Alfredtom表示:

    Юридические услуги от адвокатов и юристов с самым высоким рейтингом
    адвокат по несовершеннолетним
    Если вам нужна помощь по любым юридическим вопросам в Москве, наша команда высококлассных юристов работает для вас 24 часа в сутки, 7 дней в неделю.
    У нас есть группа экспертов, которые предоставляют консультации и помощь по различным юридическим вопросам: семейные, финансовые или административные. Мы внимательно исследуем Вашу ситуацию и разработаем эффективный план действий по юридической защите. Изучим доказательную базу и подготовим необходимые документы, которые законно решат Ваши юридические трудности. Вы можете связаться с нами по телефону, онлайн или лично, чтобы обсудить проблему.

    Юристы Межрайонной ассоциации Москвы
    Компетентные специалисты, эксперты в различных областях права. Они помогут в решении самых разных юридических проблем:

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

    Адвокаты Межрайонной ассоциации Москвы могут помочь Вам положительно решить даже трудно доказуемые ситуации. Например, наши клиенты выигрывали дела, связанные с:
    ДТП;
    взысканием долгов;
    бракоразводными процессами;
    разделом имущества.
    Наши адвокаты лично сопровождают клиентов, представляют интересы на встречах с представителями исполнительных, надзорных и государственных органов, а также в суде.

    Ассоциация адвокатов и юристов Москвы поможет отстоять Ваши права и избежать лишних юридических трудностей. Мы предлагаем доступную и профессиональную юридическую помощь в решении любых сложных правовых вопросов.

  17. StephenDeery表示:

    What’s up to every body, it’s my first pay a quick visit of this webpage; this web site contains awesome and really fine data in support of readers.
    https://www.elle.com/es/moda/noticias/a33432249/bolsos-mini-de-asa-corta-tendencias/

  18. Nerve Fresh表示:

    You got a very excellent website, Gladiolus I noticed it through yahoo.

  19. Wguuonert表示:

    Sugar gets into the cells with the help of a hormone called insulin.
    Why spend extra cash for generic for lyrica pills guaranteed to buyers here
    Ask your doctor if PRISTIQ may be right for you.

  20. Yrefrey表示:

    Здравствуйте!
    Приобрести диплом о высшем образовании.
    balaklavskiy-16.ru/user/10465

  21. Yrefumy表示:

    Добрый день!
    Приобрести диплом любого университета.
    introsystems.ru/component/kunena/user/524191-tamaraworelp

  22. pech_oqkt表示:

    Подбор идеальной печи-камина для вашего дома, Купите печь-камин и создайте уют в доме, простой гид по выбору, практические советы по выбору, где найти лучшую печь-камин, Сделайте правильный выбор печи-камина для вашего дома, подборка моделей с отзывами, Выберите идеальную печь-камин для своего дома и наслаждайтесь теплом, подборка моделей с отзывами
    интернет магазины печей каминов https://dom-35.ru/ .

  23. Trefooh表示:

    Здравствуйте!
    Вопросы и ответы: можно ли быстро купить диплом старого образца?
    dimsan.blogspot.com/2009/06/user-profile-hive-cleanup-service?m=1
    Рады помочь!.

  24. Trefiih表示:

    Привет!
    Как купить диплом о высшем образовании с минимальными рисками
    chip-ecu.ru/threads/orange-5-usb.78/#post-7049
    Окажем помощь!.

  25. Lazrojw表示:

    Привет!
    Мы изготавливаем дипломы любых профессий по невысоким ценам.
    telegra.ph/distancionnoe-obuchenie-v-pedagogicheskom-vuze-08-02

發佈留言

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