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

20,365 Responses

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

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

  3. Andrew White表示:

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

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

  5. Billy Hall表示:

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

  6. Karen Sims表示:

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

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

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

  9. Jamie Vega表示:

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

  10. Ryan Ruiz表示:

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

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

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

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

  14. Sean Meyers表示:

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

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

  16. Сервисный центр предлагает качественый ремонт холодильника pozis адреса ремонта холодильников pozis

  17. Emma Hill表示:

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

  18. Jesse Smith表示:

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

  19. Shawn Miller表示:

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

  20. Gartandabsex表示:

    Как поддерживать хорошее настроение с помощью смешных приколов

  21. Jessika表示:

    my web blog … Jessika

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

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

  24. Kevinplaky表示:

    Sea robins are fish with ‘the wings of a bird and multiple legs like a crab’
    kra9 cc
    Some types of sea robins, a peculiar bottom-dwelling ocean fish, use taste bud-covered legs to sense and dig up prey along the seafloor, according to new research.

    Sea robins are so adept at rooting out prey as they walk along the ocean floor on their six leglike appendages that other fish follow them around in the hope of snagging some freshly uncovered prey themselves, said the authors of two new studies published Thursday in the journal Current Biology.

    David Kingsley, coauthor of both studies, first came across the fish in the summer of 2016 after giving a seminar at the Marine Biological Laboratory in Woods Hole, Massachusetts. Kingsley is the Rudy J. and Daphne Donohue Munzer Professor in the department of developmental biology at Stanford University’s School of Medicine.

    Before leaving to catch a flight, Kingsley stopped at a small public aquarium, where he spied sea robins and their delicate fins, which resemble the feathery wings of a bird, as well as leglike appendages.

    “The sea robins on display completely spun my head around because they had the body of a fish, the wings of a bird, and multiple legs like a crab,” Kingsley said in an email.
    “I’d never seen a fish that looked like it was made of body parts from many different types of animals.”
    Kingsley and his colleagues decided to study sea robins in a lab setting, uncovering a wealth of surprises, including the differences between sea robin species and the genetics responsible for their unusual traits, such as leglike fins that have evolved so that they largely function as sensory organs.

    The findings of the study team’s new research show how evolution leads to complex adaptations in specific environments, such as the ability of sea robins to be able to “taste” prey using their quickly scurrying and highly sensitive appendages.

  25. KeithMup表示:

    7 simple secrets to eating the Mediterranean way
    kraken магазин
    What if “diet” wasn’t a dirty word?

    During Suzy Karadsheh’s childhood in Port Said, Egypt, diet culture was nonexistent.

    “My parents emphasized joy at the table, rather than anything else,” Karadsheh said. “I grew up with Mediterranean lifestyle principles that celebrate eating with the seasons, eating mostly whole foods and above all else, sharing.”

    But when Karadsheh moved to the United States at age 16, she witnessed people doing detoxes or restricting certain food groups or ingredients. Surrounded by that narrative and an abundance of new foods in her college dining hall, she says she “gained the freshman 31 instead of the freshman 15.” When she returned home to Egypt that summer, “I eased back into eating the Mediterranean food that I grew up with. During the span of about two months, I shed all of that weight without thinking I was ever on a diet.”
    To help invite joy back to the table for others — and to keep her family’s culinary heritage alive for her two daughters (now 14 and 22) — Atlanta-based Karadsheh launched The Mediterranean Dish food blog 10 years ago. Quickly, her table started getting filled with more than just her friends and family.

    “I started receiving emails from folks whose doctors had prescribed the Mediterranean diet and were seeking approachable recipes,” Karadsheh said. The plant-based eating lifestyle, often rated the world’s best diet, can reduce the risk for diabetes, high cholesterol, dementia, memory loss and depression, according to research. What’s more, the meal plan has been linked to stronger bones, a healthier heart and longer life.

    Preparing meals the Mediterranean way, according to Karadsheh, can help you “eat well and live joyfully. To us, ‘diet’ doesn’t mean a list of ‘eat this’ and ‘don’t eat that.’” Instead of omission, Karadsheh focuses on abundance, asking herself, “what can I add to my life through this way of living? More whole foods, vegetables, grains, legumes? Naturally, when you add these good-for-you ingredients, you eat less of what’s not as health-promoting,” she told CNN.

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

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

  28. Jamessoync表示:

    продлить карту водителя для тахографа https://tachocards.ru/

發佈留言

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