透過網頁讀取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,788 Responses

  1. Timsothyabela表示:

    Because the admin of this website is working, no uncertainty very quickly it will be famous, due to its quality contents.
    https://slovo-pacana.info/

  2. Shaneevige表示:

    Hello, I think your website might be having browser compatibility issues. When I look at your website in Chrome, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, excellent blog!
    https://slovo-pacana.info/

  3. Dannyimmep表示:

    Мы покажем на тему Условия счастливая пятница 1xbet с подробными ответами. Как корректно установить приложение 1xBet на любой смартфон. Скачивание программы требует минимум времени и работает на любых смартфонах на базе операционных систем Android и iOS. После установки вы сможете работать ко всем сервисам компании и начнете делать ставки в любом удобном месте.

  4. BradleyEdino表示:

    guvenilir casino siteleri Canl? Casino Siteleri Casino Siteleri

  5. RobertoEmott表示:

    How Austrian climber Babsi Zangerl completed a ‘hard to believe’ historic ascent of El Capitan
    гей член
    On a vertical rockface like El Capitan, the soaring slab of granite in California’s Yosemite National Park, perfection is an elusive, almost impossible goal for professional climbers.

    It can take years of experience to master a route to the top of the 3,000-foot wall, such is its difficulty and magnitude. That’s precisely why Babsi Zangerl’s recent “flash” of El Cap is so unique and impressive.

    In climbing, to “flash” a route is to reach the top on the first attempt without any falls – a feat never before achieved on El Cap prior to Zangerl’s maiden summit of Freerider last month. From bottom to top, she was faultless.

    “It was hard to believe,” the Austrian climber tells CNN Sport. “I was so surprised that this just happened and that I didn’t fall … I could have fallen so many times on that climb.”
    Freerider is a popular route up El Capitan, the same one taken by Alex Honnold when he climbed the rockface without ropes or harnesses in the Oscar-winning documentary “Free Solo.”

    Zangerl has lots of experience climbing on El Cap and around Yosemite but had never previously attempted the 30-plus pitches up Freerider. The challenging Monster Offwidth section – a 60-meter-long (almost 197 feet) crack around halfway through the climb – had put her off, and flashing the route, she says, wasn’t a long-standing target for her.

    “It was more that we just could try to go flash and see how far we can get,” Zangerl explains. “But the expectations were really low, so it was not a big goal from the beginning … There are some really slabby pitches where you don’t have hand holds, so you’re mostly standing on the bad feet, and you always can slip off.

    “The chance was really low – I didn’t have the feeling that we have a big chance on the flash.”

    It was only once she had conquered the Boulder Problem – perhaps the hardest, most treacherous part of the climb with only razor-thin holds on which to grip – that the flash seemed possible.

    “Then it was kind of: you don’t want to f**k it up on the last part,” says Zangerl.

  6. FrankEmine表示:

    yat?r?ms?z deneme bonusu veren siteler: denemebonusuverensiteler25 – denemebonusuverensiteler25

  7. JasonUnsoG表示:

    https://sweetbonanza25.com/# sweet bonanza

  8. SpravkiNiT表示:

    Мы гарантируем оперативное оформление всех видов справок, от медицинских до справок для работы или учебы. Каждая справка будет соответствовать законодательству и принята в любых учреждениях https://kupit-med-spravki.ru/

  9. Ismaelfer表示:

    What a stuff of un-ambiguity and preserveness of valuable experience on the topic of unexpected feelings.
    https://slovo-pacana.info/

  10. Everett表示:

    My web page Explore Daycares Locations [Everett]

  11. Wallacefex表示:

    yat?r?ms?z deneme bonusu veren siteler: yeni deneme bonusu veren siteler – denemebonusuverensiteler25

  12. BradleyEdino表示:

    sweet bonanza yorumlar sweet bonanza guncel sweet bonanza

  13. Wallacefex表示:

    sweet bonanza yorumlar: sweet bonanza giris – sweet bonanza kazanma saatleri

  14. BradleyEdino表示:

    Casino Siteleri Casino Siteleri en guvenilir casino siteleri

  15. Also visit my blog post: Daycare Near Me By State (Cpitelecom.info)

  16. CarlosSooge表示:

    Альткоин сс обменник – Альткоин бестчейдж, Альткоин бестчейдж

  17. выведение из запоя на дому в сочи vyvod-iz-zapoya-sochi23.ru .

  18. DavidCek表示:

    taya 365 login 365 taya

  19. JasonUnsoG表示:

    http://slotsiteleri25.com/# slot oyunlar? puf noktalar?

  20. срочное изготовление загранпаспорта срочное изготовление загранпаспорта .

  21. Wallacefex表示:

    deneme bonusu veren siteler yeni: deneme bonusu veren siteler – yeni deneme bonusu veren siteler

  22. CarlosSooge表示:

    Alt coin cc обменник – Alt coin bestchange, Альткоин обменник

發佈留言

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