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

29,952 Responses

  1. ThomasGed表示:

    Comment verifier la pertinence du code promo 1xbet?
    Pour verifier la pertinence du 1хбет что такое промокод, le joueur doit se connecter a son compte. En utilisant les parametres, vous devez entrer dans la section «verifier le code promotionnel et entrer la combinaison copiee.

  2. Если вы искали где отремонтировать сломаную технику, обратите внимание – выездной ремонт бытовой техники в краснодаре

  3. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

  4. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

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

  6. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники

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

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

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

  10. ArthurKib表示:

    https://mexicopharmacy.cheap/# medicine in mexico pharmacies

  11. Отличный сайт! Всем рекомендую!картина на холсте в Тюмени

  12. VictorTax表示:

    Remember when Lady Gaga ‘bled’ onstage during her shocking performance at the 2009 VMAs?
    гей порно парни

    Singing about the perils of fame, being dragged out from beneath a fallen chandelier then bleeding to death in front of a roomful of celebrities: Lady Gaga was not shy about making her debut at the MTV Video Music Awards.

    The year was 2009 — many will remember it as the year rapper Ye (formerly Kanye West) stage-crashed 19-year-old Taylor Swift and suggested her award for Best Female Video should have gone to Beyonce instead. But never one to be overshadowed, Lady Gaga, then 23, made some pop culture history of her own that night.

    Her rendition of “Paparazzi” — lamenting both unrequited love and the sinister effects of hounding tabloids — has gone down in the mists of Gaga legend; not least because a lack of high-quality footage means fans must resort to watching grainy screen-recorded versions circulated on social media.
    Over the limited number of pixels, Gaga can be seen at the start of the performance in an all-white ensemble: a bejeweled, asymmetric lace bodysuit and matching cape, thigh-high boots, a feathered Keko Hainswheeler headpiece and strings of glinting pearls. As she staggered back from her piano at the song’s crescendo, however, an audible gasp swept the room as thick blood suddenly appeared to be pouring from her abdomen.

    “I’m your biggest fan, I’ll follow you until you love me,” Gaga wailed desperately, her once-pristine outfit now daubed in scarlet. She ended the number suspended above the stage, ‘dead,’ as more blood dripped from her eyes.

    “(It) gives me chills every time I watch it,” Olivia Rodrigo told MTV in 2021. “I think Lady Gaga is the best performer of our generation.” The “Drivers License” singer appeared to take notes. At this year’s Grammy Awards, she began to ‘bleed’ from clenched fists while performing her hit “vampire,” spreading fake blood across her arms and neck as the song progressed.

  13. Если вы искали где отремонтировать сломаную технику, обратите внимание – техпрофи

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

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

  16. Eugenesmivy表示:

    Drought-hit Danube River reveals scuttled German World War II ships
    порно жесток
    The wrecks of explosives-laden Nazi ships sunk in the Danube River during World War II have emerged near Serbia’s river port town of Prahovo, after a drought in July and August that saw the river’s water level drop.

    Four vessels dating from before 1950 have also come to light in Hungary’s Danube-Drava National Park near Mohacs, where the Danube’s water level stood at only 1.5 meters (4.9 feet) on Tuesday, the lingering effect of severe heat waves and persistent drought in July and August.

    The vessels revealed in Prahovo were among hundreds scuttled along the Danube by Nazi Germany’s Black Sea fleet in 1944 as they retreated from advancing Soviet forces, destroying the ships themselves. The wrecks can hamper river traffic during low water levels.
    Strewn across the riverbed, some of the ships still have turrets, command bridges, broken masts and twisted hulls, while others lie mostly submerged under sandbanks.

    Endre Sztellik, a guard at the Danube-Drava national park, said of one of the ships, “we still don’t know what this is exactly. What is visible and an unfortunate fact is that the wreck is diminishing as people are interested in it and parts of it are going missing.”
    The Danube stood at 1.17 meters (3.8 feet) in Budapest on Tuesday, which compares with an all-time record low of around 0.4 meters (1.3 feet) registered in October 2018. During floods, the Danube rises well above 6 meters (19.7 feet).

    “Eastern Europe is experiencing critical drought conditions that are affecting crops and vegetation,” the European climate service Copernicus said on its website in its latest drought report, published earlier this month.

  17. Coreyges表示:

    Discover the world of excitement at Pin Up Casino, the world’s leading online casino. The official website Slot pick up offers more than 4,000 slot machines. Play online for real money or for free using the working link today

  18. Если вы искали где отремонтировать сломаную технику, обратите внимание – профи услуги

  19. RobertMef表示:

    п»їbest mexican online pharmacies: buying from online mexican pharmacy – buying from online mexican pharmacy

  20. 888starzMt表示:

    Скачайте мобильное приложение от 888Starz и начните выигрывать прямо с телефона https://iqtorg.ru/forum/user/18956/

  21. Если вы искали где отремонтировать сломаную технику, обратите внимание – профи краснодар

  22. Arthurjen表示:

    Ретрит http://ретриты.рф международное обозначение времяпрепровождения, посвящённого духовной практике. Ретриты бывают уединённые и коллективные; на коллективных чаще всего проводится обучение практике медитации.

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

  24. Coreyges表示:

    Discover the world of excitement at Pin Up Casino, the world’s leading online casino. The official website Game pic up offers more than 4,000 slot machines. Play online for real money or for free using the working link today

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

  26. Coreyges表示:

    Discover the world of excitement at Pin Up Casino, the world’s leading online casino. The official website Slot pick up offers more than 4,000 slot machines. Play online for real money or for free using the working link today

  27. Kzyday表示:

    generic voveran – nimotop usa brand nimodipine

  28. Coreyges表示:

    Discover the world of excitement at Pin Up Casino, the world’s leading online casino. The official website Pil up offers more than 4,000 slot machines. Play online for real money or for free using the working link today

  29. MauriceGueda表示:

    top online pharmacy india: best india pharmacy – online pharmacy india

發佈留言

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