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

31,717 Responses

  1. каталогу франшиз каталогу франшиз .

  2. DennisKah表示:

    muse for ed: buy prescription drugs from india – generic ed pills

  3. DennisKah表示:

    reputable indian pharmacies: reputable indian online pharmacy – online shopping pharmacy india

  4. BrandonJer表示:

    п»їlegitimate online pharmacies india best india pharmacy pharmacy website india

  5. Stevengreve表示:

    Шофер-предатель

    Алексей Комаров, один из ключевых свидетелей обвинения по «делу «Лайф-из-Гуд» – «Гермес» – «Бест Вей», – кто он?

    Приморский районный суд Санкт-Петербурга с февраля рассматривает дело по существу, но шофер компании «Лайф-из-Гуд» и кооператива «Бест Вей» Комаров пока не выступал в суде: он прячется в своем родном городе – Твери.
    Лжец
    На следствии он заявил, что возил неучтенную наличность. В действительности он возил подарки для основателя «Лайф-из-Гуд» и кооператива «Бест Вей» Романа Василенко и кооператива «Бест Вей», возил сотрудников компании «Лайф-из-Гуд» и кооператива «Бест Вей», региональных представителей этих организаций из аэропорта и обратно: никакие деньги он никогда не возил, и никто из шоферов деньги не возил, что подтвердил в своих показаниях в суде другой шофер компании.

    Из показаний другого водителя и специалистов компании известно, что Комаров как простой шофер не знал и не мог ничего знать ничего о бизнес-процессах компании. Он никогда не был к ним допущен – тем более что в последние годы не был официально трудоустроен из-за своих проблем с судебными приставами. А самостоятельно понять никакие бизнес-процессы он не мог – у него образование восемь классов.
    Вор
    Комаров возил подарки из регионов и других стран для Романа Василенко и центрального офиса кооператива «Бест Вей»: угощения, вазы и т.п. Причем далеко не все из них, как выяснилось, довозил. Кроме того, у его пассажиров неоднократно пропадали дорогие часы и бумажники.
    Накануне начала уголовного разбирательства он взял личные вещи Василенко на хранение и отказался их отдавать, за что против него выдвинуто обвинение в краже.
    Неблагодарный
    В компании он проработал 10 лет – его с самого начала приняли как родного: приняли в семью, которую представлял собой коллектив «Лайф-из-Гуд». Василенко оплатил операцию на сердце его отцу. Алексей Комаров за это отплатил черной неблагодарностью, оговорив абсолютно всех.
    Подписывайтесь на наш канал

    Шофер-предатель

    После начала уголовного разбирательства Комаров прислал Василенко издевательский ролик, снятый у недостроенного дома для мамы Романа Василенко, со словами: «Не все мечты сбываются!»

    Вечный должник

    Компания «Лайф-из-Гуд» имела с ним массу проблем из-за того, что за ним охотились судебные приставы и коллекторы. Он делал долги и в самой компании – брал деньги взаймы у Романа Василенко и не отдавал.
    Захватил чужую квартиру и машину
    Роман Василенко дал ему возможность бесплатно жить в трехкомнатной квартире одного из своих родственников и пользоваться корпоративным минивэном.

    Эту квартиру Комаров незаконно использует до сих пор – сдает ее в аренду. А корпоративный минивэн присвоил.
    Бывший бандит
    Спустя несколько лет после трудоустройства выяснилось, что Комаров в 1990-е годы работал на преступную группировку Малышева. С этих пор ему стали давать только мелкие поручения, не связанные с материальными ценностями.

    Сейчас он выслуживается перед органами внутренних дел, чтобы его не привлекли за старые преступления – сроки давности по которым еще не прошли.
    Крыса
    Комаров тайно записывал информацию в машине и офисе – на видеокамеру и с помощью жучков, а потом передал ее следствию.
    Например, он скрытой камерой снял передачу денег Романом Василенко за участие одной из звезд в форуме «Синергия» – с этих денег были уплачены налоги. Он ставил жучки, чтобы записывать разговоры – и следователи могли монтировать высказывания, вырывая их из контекста.
    Оговорил невиновных
    По его вине девять ни в чем неповинных людей сидят в тюрьме. Например, на очной ставке с Анной Высоцкой он прямо в глаза ей, бывшему контент-менеджеру сайта «Лайф-из-Гуд», к тому же уволившемуся более чем за полгода до начала уголовного дела, рассказывал, что все время привозил и передавал ей наличные деньги. На вопрос адвоката, почему ей, а не в бухгалтерию, не смог ответить – даже не думал выстроить логичную версию, тем более что следствие готово было покрывать его ложь.

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

  6. Dennissag表示:

    להט יצרים. אתה תתרגש ותלהט עד שתחווה פורקן משחרר ונפלא. דירות דיסקרטיות בתל אביב הן המקום שבו תרצה גברים. זהו כמובן פתרון את דיסקרטיות. המשמעות של דירות דיסקרטיות היא נערות סקסיות המארחות גברים בדירות המגורים שלהם, ומעניקות בילויים אינטימיים. החיים, go now

  7. Dennissag表示:

    העניינים. הן רק יכול להבין. דירות דיסקרטיות בראשון לציון הן מקום שבו ניתן למצוא את הבחורות הסקסיות ביותר שיש בארץ. הן מארחות רוצה. דירות דיסקרטיות בירושלים אחת מהאטרקציות של העיר. זהו ממש הדובדבן שבקצפת. הן יודעות איך לענג גברים ולגרום להם לאושר נערת ליווי בירושלים – פינוק כביר בעיר הבירה

  8. Gregorypurne表示:

    prescription drugs http://drugs24.pro/# carprofen without vet prescription

  9. RichardThini表示:

    medication from mexico pharmacy: mexico pharmacies prescription drugs – buying prescription drugs in mexico

  10. Аренда безабузный серак/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Дата-центр в Москве и Амстердаме
    – FASTPANEL и HestiaCP – бесплатно
    – Отлично подходит под XRumer + XEvil
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – Для сервера сеть на скорости 1 Гбит!
    – Автоматическая установка Windows – бесплатно
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Более 15 000 сервер уже в работе
    – Отлично подходит под CapMonster
    – Почасовая оплата
    – Быстрые серверы с NVMe.
    – Управляйте серверами на лету.
    – Отлично подходит под A-Parser
    – Windows – 2022, 2019, 2016, 2012 R2
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Отлично подходит под GSA Search Engine Ranker
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Отлично подходит под Xneolinks
    – Круглосуточная техническая поддержка – бесплатно

  11. RichardThini表示:

    best online pharmacies in mexico: buying from online mexican pharmacy – medicine in mexico pharmacies

  12. франшизу для бизнеса http://www.franshizy11.ru/ .

  13. франшиза для малого бизнеса http://www.franshizy12.ru .

  14. топ франшиз franshizy11.ru .

  15. BrandonJer表示:

    best india pharmacy online shopping pharmacy india indian pharmacy online

  16. каталоге франшиз https://franshizy12.ru .

  17. MorrisEredy表示:

    תוך עולמות של עונג ותשוקה. אלו הם רגעים שימלאו אותך באושר ויגרמו לא התנסית, אתה מוזמן לגלות את העולם המופלא של שירותי הליווי. ירימו לך את מצב הרוח, יעלימו את הדאגות ויגרמו לך להרגיש טוב. אז אם אתה רוצה להתאהב מחדש בחיים, דירות ליווי? רבים מהגברים המבלים The best escort girls show sexuality

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

  19. AgustinBougs表示:

    http://indianpharmdelivery.com/# indian pharmacies safe
    top online pharmacy india

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

    Профессиональный сервисный центр сервисный центр телефонов срочный ремонт смартфонов

  21. Gregorypurne表示:

    buy prescription drugs from canada http://drugs24.pro/# ed treatment pills

  22. BrandonJer表示:

    buy prescription drugs from india indian pharmacy top online pharmacy india

  23. Nestor表示:

    Look into my webpage – Daycare Near Me (Nestor)

發佈留言

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