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

32,357 Responses

  1. Jamescix表示:

    пин ап пин ап казино пинап

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

  3. DavidAcarf表示:

    http://1winci.icu/# пин ап вход
    пин ап казино

  4. Mazrmyt表示:

    Как официально купить аттестат 11 класса с упрощенным обучением в Москве

    lms.jolt.io/blog/index.php?entryid=1707

  5. EdwardGuina表示:

    canl? casino: canl? casino siteleri – cazino

  6. Shawngaumb表示:

    посетить сайт https://zelenka.guru

  7. Алкоклуб表示:

    Алкоклуб и Alcoclub предлагают удобный сервис для заказа напитков на дом. Позвоните по номеру +74951086757, чтобы заказать алкоголь в Москве в любое время суток. Этот сервис позволяет легко и просто получить нужные напитки, делая процесс максимально комфортным.

    Если вам требуется доставка алкоголя ночью, Алкоклуб — идеальное решение. Связавшись с Alcoclub по номеру +74951086757, вы сможете легко заказать алкоголь на дом. Сервис предлагает широкий ассортимент напитков, что делает процесс быстрым и простым.

    С Алкоклуб вы всегда можете рассчитывать на оперативную доставку. Оформите заказ через +74951086757, чтобы воспользоваться доставкой алкоголя круглосуточно. Платформа Alcoclub обеспечивает высокий уровень сервиса, чтобы каждый клиент мог получить желаемый напиток вовремя.

  8. Mazraia表示:

    Быстрая схема покупки диплома старого образца: что важно знать?
    lms.jolt.io/blog/index.php?entryid=4629

  9. humandesigncz表示:

    Тема «Четыре типа в Дизайне Человека» важна для понимания не только на теоретическом, но и на практическом уровне. Этот инструмент самопознания помогает каждому из нас осознать свою природу и использовать индивидуальные особенности для улучшения качества жизни. Рассмотрим рационально-практическую сторону каждого из типов, их определения и различия.

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

    Еще один важный тип в Дизайне Человека — Манифестор. Этот тип уникален своей независимостью и способностью инициировать действия. Они не нуждаются в отклике, как Генераторы, и могут сразу принимать решения и действовать. Индивидуальная особенность Манифестора — это стремление к свободе и независимости. Практическая сторона их природы проявляется в том, что они способны запускать процессы и вдохновлять окружающих.

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

    Четвертый тип в Дизайне Человека — это Рефлектор. Рефлекторы — это люди, которые отражают состояние окружающей среды. Они, как зеркало, отражают общее состояние общества или коллектива. Практическая роль Рефлектора — это оценка и отслеживание состояния окружающих.

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

    источник

  10. Diplomi_dfel表示:

    купить диплом столяра man-diploms.ru .

  11. DavidAcarf表示:

    http://1winci.icu/# пин ап зеркало
    пин ап кз

  12. Kolyaska_qxea表示:

    Дарим вашему ребенку радость прогулок – Peg Perego
    gt3 коляска https://kolyaska-peg-perego.ru/ .

  13. Russelljorry表示:

    casino oyunlar?: casino siteleri – en iyi casino siteleri

  14. Russelljorry表示:

    пин ап вход: пин ап официальный сайт – пин ап зеркало

  15. Sahabet_ieml表示:

    Populer slotlar Sahabet casino’da sansl? oyuncular?n? cag?r?yor

    Sahabet Casino Sahabet .

  16. Ernestexove表示:

    pinup az: pin up azerbaycan – pin-up

  17. Lazrmjw表示:

    Всё о покупке аттестата о среднем образовании: полезные советы
    shockmusik.ru/diplom-dlya-uspeshnoy-kareryi-bez-ekzamenov-i-testov

  18. Diplomi_kjkl表示:

    купить диплом горного инженера [url=https://server-diploms.ru/]server-diploms.ru[/url] .

  19. Lazrxdw表示:

    Как оказалось, купить диплом кандидата наук не так уж и сложно
    elion.forumex.ru/viewtopic.php?f=110&t=273

發佈留言

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