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

34,660 Responses

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

  2. DarrenUnjuh表示:

    https://lisinopril1st.com/# lisinopril1st

  3. Wilburrit表示:

    “Дело “Лайф-из-Гуд” — “Гермес” — “Бест Вей”: кооператив выполнял обязательства
    Смирнова Лайф из Гуд
    “Мне сказали, что это лучше банка”
    Признанный следствием потерпевшим Шахмин — пенсионер МВД. Лично с подсудимыми не знаком, но на презентациях видел.

    О “Лайф-из-Гуд”, “Гермесе”, “Бест Вей” узнал из СМИ и интернета. Консультанты Галлямовы из Нефтекамска пригласили вступить. “Бест Вей” и “Гермес” — это как будто одна система, — сообшил Шахмин. — Я согласился вложить деньги в “Гермес”, так как давно знал Галлямовых. Они продали квартиру и с бизнеса вложили деньги туда, они раньше меня там были. Я вложил 2,3 млн рублей, взятые в кредит в Газпромбанке, их передал Галлямовым лично в руки, так как доверял, они говорили, что откроют счет “Виста”. Мне сказали, что это лучше банка и лучше, чем “недвижку” покупать. Если сколько-то людей созываешь, ты получаешь какие-то проценты и еще растешь. Обещали 30% доходности, якобы идет инвестирование акций — криптой, недвижимостью. Деньги высветились в личном кабинете в евро, потом я узнал, что деньги не настоящие, это информационная система, компьютерная цифра, виртуальные деньги”, — рассказал он. При этом подтверждений передачи денег у Шахмина нет, однако Галлямов признал на допросе у следователя, что получил деньги и внес на счет “Виста”.

    Свидетель вывел со счета “Виста”, по его словам, 1 тыс. евро и 50 тыс. рублей. Для платежей предлагали “Пей Про”: мол, не надо волноваться, будем выводить деньги, проходи верификацию. Потом у свидетеля появились сомнения, и он заявил, что хочет вывести деньги. Галлямовы, по его словам, начали всячески откладывать вывод, до тех пор, пока ЦБ не включил “Гермес” в предупредительный список.

    Когда начались трудности, хотели через систему “Свифт” вывести, через “Тинькофф” — но это не получилось: “Начали они просить, чтобы никто из клиентов не возмущался, начали говорить о регистрации на криптобирже “Бинанс” для дальнейшего вывода денег. Также я там зарегистрировался, но тоже ничего не получилось”.

    После этого Шахмин написал заявление в полицию. Всплывшие в ходе судебного заседания три личных кабинета в “Лайф-из-Гуд” и переводы ему на карту объяснить не смог.

    Признанная потерпевшей Дорда была только клиентом “Гермеса”. Подсудимых не знает.

    “Узнала о компании в 2016 году при переезде из Москвы во Владимир. Рассказали консультанты Адрианова и Волюшко, которые занимались страхованием жизни. Рассказывали и о ПК “Бест Вей”, но мне это было неинтересно. Адрианова знала, что я продала квартиру и денежки у меня есть. Зная это, консультант целенаправленно решила затащить в компанию “Гермес”. И я стала очередной жертвой. Мне сказали, что Андрианова занималась гипнозом. Отношения дружеские были до 2021 года. Андрианова была вхожа в дом, знакома с мужем. Деньги передавала Андриановой. Было открыто три счета” — рассказала Дорда. Признанная потерпевшей утверждает, что деньги ни разу не снимала.

    Заявляет ущерб в более 700 тыс. рублей.

    Признанная следствием потерпевшей Шайхулина (допрошенная по ВКС с Самарой) — клиент компании “Гермес”. Из подсудимых знает Виктора Ивановича Василенко и Наливана.

    “Первый договор с “Гермесом” заключила в 2019 году, второй — в 2021 году. Внесла 1 тыс. евро. Договоры скачивала с кабинета, отдала наличными 70 тыс. руб. В личный кабинет сама заходить могла, но переводить не было возможности. Обещали плавающий процент от 20% в год. Второй счет открыла на 1 тыс. евро. Переводила частным лицам небольшие суммы. Деньги на счету появлялись согласно переводам. Без помощи консультанта Духнова выводить не получалось. “Гермес” свои обязательства исполнял, начисляли проценты, ажио брали. Я сама не вникала, но видела, что каждый месяц начисления были. В кабинет заходила раз в месяц. В последний раз в кабинет заходила накануне заявления в органы. Потом его заблокировали”, — говорит она.

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

    Заявляет общую сумму ущерба в 2 430 430 руб.: “Я взяла кредит, плачу теперь проценты, поэтому эту сумму процентов хочу получить”. При этом в материалах уголовного дела фигурирует сумма в 1 650 000 руб. ущерба.

    Шайхуллина поясняет, что “забыла про 800 тыс., так как мне карту перевели 900 тыс. Духнов сказал: “Они у тебя будут лежать, давай обратно внесем”, и я внесла 850 тыс. где-то. Я только что вспомнила про 800 тыс.”.

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

  5. BrandenSlomy表示:

    clomid online: rex pharm – can i order cheap clomid for sale

  6. Kolyaska_sgPl表示:

    Bugaboo: комфорт и безопасность в каждой детали, Bugaboo: лучшее решение для малыша и родителей, Как выбрать идеальную коляску Bugaboo для вашего малыша, Комфорт и удобство с Bugaboo, Bugaboo: легкость и управляемость в каждом краше, Bugaboo Cameleon: легендарная коляска для малышей, Bugaboo Ant: компактность и функциональность в одном, Bugaboo Lynx: современный дизайн и отличное качество.
    bugaboo fox2 коляска 2 в 1 black black black bugaboo fox2 коляска 2 в 1 black black black .

  7. Kolyaska_jiPl表示:

    Идеальная коляска Bugaboo для вашего малыша, Купить коляску Bugaboo – значит сделать правильный выбор, Как выбрать идеальную коляску Bugaboo для вашего малыша, Bugaboo: стиль и функциональность в одном, 5 причин выбрать коляску Bugaboo для вашего малыша, Bugaboo Fox: лучший выбор для активных родителей, Bugaboo Donkey: простор для ваших малышей, Bugaboo Buffalo: коляска для любых приключений.
    bugaboo ant коляска bugaboo ant коляска .

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

  9. AlbertDuM表示:

    buy cytotec pills: cytpremium – cytotec buy online usa

  10. poker casino表示:

    Here is my web blog; poker casino

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

  12. Sazrogc表示:

    Приобретение диплома ПТУ с сокращенной программой обучения в Москве

    wmrp.listbb.ru/viewtopic.php?f=51&t=1059

  13. BernardMop表示:

    buy cytotec over the counter cheapest cytotec cytotec online

發佈留言

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