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

35,146 Responses

  1. What i do not realize is if truth be told how you’re no longer actually a lot more smartly-appreciated than you may be right now. You’re very intelligent. You already know thus significantly with regards to this subject, produced me in my opinion consider it from so many various angles. Its like men and women are not interested except it is one thing to accomplish with Woman gaga! Your personal stuffs outstanding. Always handle it up!

  2. как вызвать наркологическую скорую помощь в москве как вызвать наркологическую скорую помощь в москве .

  3. axbdnifgo表示:

    Eyebrow lamination — a perm for those wanting their brows to appear fuller, thicker and maybe a little unkempt — is one of the latest semi-permanent beauty trends (think microblading, or tattooing on eyebrows). During the pandemic, some aestheticians saw the number of clients requesting laminations increase substantially, even though the trend has been around for a few years now. “I think that we’re all coming out of the thin-eyebrow phase, and so many people want to fix their brows from their over-plucked stages from the past,” said Jasmine Winsett, an aesthetician in Boise, Idaho, who charges $55 for her lamination service. She said she has done more than 500 eyebrow laminations since she began offering them in 2020. And voila! Thick, feathery, even eyebrows, all in the space of an hour. As with any eyebrow treatment, my brows were quite defined and ‘done’ when I left the salon, but were much more natural the next morning. In terms of aftercare, Anna advised me not to wash my eyebrows for 24 hours, not to sleep on them the first night after having them done, as it could cause the hairs to curl again, and to use coconut oil everyday afterwards to keep them moisturised.
    https://kowabana.jp/users/129869
    Comes out darker than I thought it would, but I like it. Feels like a blue-black (I had heard it leaned grey but doesn’t seem to). I have fair skin, light brown hair and blue eyes – it looks pretty good on me as long as I only put on a light coat. It washes off easier than most mascara, which is what I wanted. Doesn’t flake. For best results, apply LE VOLUME DE CHANEL over LA BASE MASCARA. Duplicate a high-end product or never buy the same shade twice. The Dupe List is here to help. ColourPop Cloud 9 Palette Swatches Drumroll please. This mascara is the universally agreed-upon best of the bunch because it works the best on all types of eyelashes and for all types of people. If, after reading the whole list, you still aren’t sure which one to try, just buy this one. It resides in the center of that perfect-mascara Venn diagram of being smudgeproof (thanks to its tubular formula), volumizing, thickening, and lengthening.

  4. как вызвать наркологическую скорую помощь в москве как вызвать наркологическую скорую помощь в москве .

  5. неотложная наркологическая помощь в москве неотложная наркологическая помощь в москве .

  6. Charlesbot表示:

    http://maxpillsformen.com/# Tadalafil price

  7. BrettTIT表示:

    Tadalafil price: MaxPillsForMen.com – Cialis 20mg price

  8. вызов нарколога на дом частная скорая помощь вызов нарколога на дом частная скорая помощь .

  9. Donaldabula表示:

    online erectile dysfunction pills fast pills easy order ed pills online

  10. Barrybib表示:

    buy ed medication: fast pills easy – affordable ed medication

  11. BrettTIT表示:

    cheap ed treatment: generic ed meds online – how to get ed meds online

  12. Donaldabula表示:

    Order Viagra 50 mg online buy viagra online viagra canada

  13. Charlesbot表示:

    http://fastpillsformen.com/# cheapest viagra

  14. неотложная наркологическая помощь [url=http://to.iboard.ws/viewtopic.php?id=8080]неотложная наркологическая помощь[/url] .

  15. скорая наркологическая помощь [url=http://vkontakte.forum.cool/viewtopic.php?id=19656/]скорая наркологическая помощь[/url] .

  16. вызов нарколога на дом частная скорая помощь [url=ideya.forums.party/viewtopic.php?id=680]вызов нарколога на дом частная скорая помощь[/url] .

發佈留言

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