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

33,428 Responses

  1. Elijahfen表示:

    Алистаров – уголовник и террорист

    От уголовника-индивидуала до слуги криминалитета

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

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

    Наркотики и отмывание доходов

    Уроженец Калуги Алистаров отсидел четыре года в лагере – за продажу наркотиков детям.

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

    Ставка на скам

    Канал Алистарова «Железная ставка» – «разоблачение» неправильных (по мнению криминалитета) финансовых проектов и продвижение «правильных»: пирамид и онлайн-казино, спонсирующих Алистарова.

    Он начинался как канал о «правильных» ставках в казино и не сменил название – потому что маркетинговая задача осталась прежней: расчищать поле для «хороших», по «экспертному» мнению Алистарова (то есть заплативших ему), мошенников.

    Обычно Алистаров начинает с попытки вымогательства – представляет жертве компромат и предлагает заплатить. Если жертва отказывается, в ход идут травля и насилие.

    Подстрекательство и нападение в Дубае

    1 января 2025 года состоялось жестокое нападение двух казахстанцев на предпринимателя, проживающего в Дубае, – его избили, отрезали ухо, обворовали.

    До этого Алистаров снял 12 роликов, где подсвечивал адрес этого предпринимателя, публиковал незаконно полученную информацию о его близких и его бизнесах в ОАЭ. Безо всякого стеснения использовал подглядывание, подслушивание, незаконное проникновение, вмешательство в частную жизнь – все то, что в Эмиратах, где строго соблюдается неприкосновенность имущества и жизни инвесторов, является тяжким уголовным преступлением.

    До этого Алистаров публично распространял информацию о месте жительства бизнес-партнера этого предпринимателя – то есть незаконное нарушение конфиденциальности, защищенности финансов и имущества, тайны частной жизни с помощью скрытых источников информации и информаторов в ОАЭ вошло у него в систему. Он терроризирует предпринимателей, в отношении которых нет никаких обвинительных решений судов – ни за рубежом, ни в России.

    Алистаров рассказывал, что заявил на предпринимателя в Интерпол и правоохранительные органы ОАЭ – якобы он помогает правоохранительным органам. Но это почему-то не привело к аресту предпринимателя – может быть, потому, что полиция ОАЭ не видит криминала в его деятельности?

    Ряд партнеров предпринимателя осуждены в России, сам он в розыске российских правоохранительных органов – но не осужден. Иностранные правоохранительные органы не имеют к нему претензий.

    Алистаров на протяжении длительного времени возбуждал ненависть к предпринимателю – рассказывая, что именно этот предприниматель (а не его партнеры) украл деньги вкладчиков. И представил дело так, что на него напали и его обворовали возмущенные вкладчики.

    Сам он в ходе нападения устроил внеплановый стрим, чтобы обеспечить себе алиби – вроде как он не знал, что во время стрима происходит нападение.

    Слежка на Кипре

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

    Переселение было связано с тяжелым течением коронавируса у жены предпринимателя, а также с международными проектами – инвестициями в разные отрасли экономики: строительство, торговлю и другие. Предприниматель переселился на Кипр за год до возбуждения уголовного дела следственными органами МВД, за полтора года до арестов. Он имеет паспорт Евросоюза и ни от кого не убегал, не скрывался и не скрывается.

    Предприниматель объявлялся в 2022 году в розыск в России – но следственными органами. Суд к нему претензий не выдвигал, уголовное дело сейчас рассматривается судом – и уже развалилось в суде. Интерпол и Евросоюз отказались акцептировать претензии российской полиции, сочтя их политически мотивированными и юридически необоснованными.

    Алистаров утверждает, что инвестиции в бизнес-проекты осуществляются за счет денег российских клиентов одной из австрийских инвестиционных компаний – однако предприниматель никогда не был ни собственником, ни бенефициаром, ни управляющим этой компании, созданной еще в начале 2000-х – задолго до начала его самостоятельной бизнес-карьеры.

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

    Таким образом, Алистаров устраивает травлю, вмешательство в частную жизнь предпринимателя, ничем себя не запятнавшего, – по заказу российского криминалитета, взявшего в долю коррумпированных полицейских, который стремится отнять активы на 20 млрд рублей созданного предпринимателем крупного социального, народного проекта в России – продолжающего успешно функционировать без его руководства (прекратившегося с переездом на Кипр).

    Слежка в Нидерландах

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

    Нарушение конфиденциальности в Турции

    Алистаров обнаружил и обнародовал местоположение квартиры, в которой жили и работали несколько его жертв в Стамбуле.

    Незаконный розыск в Ленинградской области

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

    Шантаж в Казахстане

    Алистаров шантажировал предпринимателей из Казахстана – под прикрытием того, что «разоблачает национальных предателей» и «врагов родины».

    Банкет на деньги украинского пирамидчика

    40-летие 6 марта этого года Алистаров вновь планирует отмечать на яхте своего друга – харьковского пирамидчика Удянского (проект Coinsbit) в Дубае?

    В 2024 году он праздновал день рождения именно в теплой компании этого мошенника – и спонсора ВСУ: занимающегося софинансированием производства бронетехники для ВСУ. Никаких сомнений в том, что он заставил и своего слугу Алистарова финансировать ВСУ.

    Государственная измена

    Алистаров даже был обвинен в факте такого финансирования – но рассказал в полиции сказку, что номер «Мегафона», с которого велось перечисление, был оформлен на него «врагами».

    Пойманы за руку финансировавшие ВСУ подельники Алистарова – «антиэмэлэмщик» Александр Крюков и заместитель управляющего так называемого Фонда защиты прав вкладчиков и акционеров Леонид Мищенко – «западэнец»: уроженец Винницкой области. Не пора ли ФСБ проанализировать проводки Алистарова?

    Должен сидеть в тюрьме

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

    –вымогательство;
    –терроризм и бандитизм;
    –травля и организация расправы над неугодными;
    –государственная измена;
    –отмывание денег;
    –мошенничество;
    –воровство;
    –вмешательство в частную жизнь.

    Тюрьмой началась карьера Алистарова, тюрьмой должна и закончиться.

  2. LarryReupt表示:

    Mexican Easy Pharm Mexican Easy Pharm mexican border pharmacies shipping to usa

  3. CurtisBam表示:

    Indian pharmacy that ships to usa: Best Indian pharmacy – indian pharmacy

  4. AndreDib表示:

    canadianpharmacyworld https://canadianmdpharm.com/# pharmacy canadian superstore
    top online pharmacy india

  5. Brandonnot表示:

    buying from online mexican pharmacy: mexico drug stores pharmacies – Mexican Easy Pharm

  6. CurtisBam表示:

    Mexican Easy Pharm: mexican rx online – Mexican Easy Pharm

  7. Billygah表示:

    navigate to this web-site [url=https://app-thorswap-finance.com]thorswap[/url]

  8. CurtisBam表示:

    canadian pharmacy king reviews: CanadianMdPharm – safe online pharmacies in canada

  9. Billygah表示:

    discover this info here thorswap

  10. AndreDib表示:

    canadian pharmacy com https://mexicaneasypharm.shop/# mexican rx online
    top 10 online pharmacy in india

  11. Billygah表示:

    his comment is here thorswap

  12. Billygah表示:

    important site [url=https://app-thorswap-finance.com]thorswap[/url]

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

    В чем отличия входных металлических дверей разных производителей.

  14. AndrewPloxy表示:

    my review here [url=https://cielo-finance.com]cielo wallet tracker[/url]

  15. Billygah表示:

    company website thorswap

  16. Werner表示:

    Also visit my page: Explore Daycares Locations (Werner)

  17. Brandonnot表示:

    Mexican Easy Pharm: Mexican Easy Pharm – Mexican Easy Pharm

  18. AndrewDok表示:

    click for source gopulse

  19. AndrewDok表示:

    navigate to this web-site gopulse.com

  20. CurtisBam表示:

    canadian pharmacy world: CanadianMdPharm – canada ed drugs

  21. Jamesvog表示:

    OR Realty — это ваш надежный партнер в мире недвижимости. Мы предлагаем большой выбор квартир, домов и коммерческих объектов по выгодным условиям. Наши специалисты помогут вам найти идеальный вариант, соответствующий вашим потребностям. Надежность, качество и удобство — вот что делает OR Realty лучшим выбором. Обращайтесь!

  22. Jamesvog表示:

    OR Realty — это ваш надежный партнер в мире недвижимости. Мы предлагаем большой выбор квартир, домов и коммерческих объектов по выгодным условиям. Наши специалисты помогут вам найти идеальный вариант, соответствующий вашим потребностям. Надежность, качество и удобство — вот что делает [url=https://or-realty.ru]OR Realty[/url] лучшим выбором. Обращайтесь!

發佈留言

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