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

13,664 Responses

  1. anakjakq表示:

    It generates Adobe Acrobat PDF reports, though you can also create plain text files with print data and generate Excel compatible reports with its result pane feature.

    The editor doesn’t have the full spectrum of advanced features, such as templates or MS-Office compatibility. It features many practical functions, including anti-malware protection, cookie filter, clipboard manager and multi-printing.
    An easy-to-use printer manager
    It’s a light software package that isn’t encumbered with social https://goodsforyoutoday.com/wp-content/uploads/2022/06/thyrdee.pdf
    50e0806aeb anakjakq

  2. bridvenc表示:

    A:

    Cool idea, but the company you’re from seems to be in financial trouble:

    … and the website is down… along with their Paypal account.
    I’m not sure where you would get a copy of that backup version if you need one… even if the tool is still available. (Did you try to back up the install-libraries directory for https://infinite-gorge-05969.herokuapp.com/renber.pdf
    50e0806aeb bridvenc

  3. Czklti表示:

    order lisinopril generic – purchase lisinopril sale buy tenormin generic

  4. odesal表示:

    The application does not remind you of your login details for each time you use it, and even allows you to automatically log you out. The program also has the ability to customize a number of settings to fit your preferences, making it an easy and user-friendly tool.
    Pros
    Supports all browsers and OS
    The application works on all PC platforms
    It has a friendly interface
    Configurable settings
    Cons
    You need to run it directly from the disk
    There could be a lot of https://otelgazetesi.com/advert/twittercamp-download/
    50e0806aeb odesal

  5. Fktgvl表示:

    order lisinopril 2.5mg generic – metoprolol 50mg canada order tenormin 100mg

  6. wadlyes表示:

    The application will be very well-adapted to the needs of users, in particular those who require to switch between different accounts with ease.
    User Switching is available as a free download for both 32-bit and 64-bit operating systems.
    Please, run the test if everything is working properly.
    Enjoy and have a nice day!

    Instaling Direct User Switching adds a new icon for your taskbar area menu! On Windows you can click it to switch directly from one https://fitgirlboston.com/wp-content/uploads/2022/06/Keep_Folder_Safe.pdf
    50e0806aeb wadlyes

  7. oswaell表示:

    PMM-Lab runs on KNIME open source projects and lets you use the tools available through KNIME without knowing the HSQL database, the format of data, and how the experimental data is handled by the data source. Since PMM-Lab is an extension, you are free to use the functionalities that are available in KNIME.

    MacPractice: Behavioral Management System – A main goal of PPS is long-term behavioral management. Sometimes, PPS recipients want an O https://panda-app.de/upload/files/2022/06/hrfxEELFNYJuPZyN7pTq_06_4e30ef0d7109ef94a0b88149b41fa2e3_file.pdf
    50e0806aeb oswaell

  8. Lkwqib表示:

    lisinopril buy online – lisinopril 2.5mg ca generic tenormin

  9. Jgleay表示:

    buy metformin 1000mg online – metformin buy online norvasc price

  10. Vjcnev表示:

    glucophage 1000mg cheap – glucophage 500mg usa norvasc 10mg price

  11. Eybhof表示:

    buy glucophage 1000mg – lipitor pills amlodipine 5mg cost

  12. Ieashs表示:

    hydroxychloroquine price – chloroquine 250mg cheap baricitinib sale

  13. Chhcby表示:

    order plaquenil online – buy chloroquine 250mg generic order baricitinib 2mg pill

  14. taurdais表示:

    May 19, 2015

    If we’ve spoken about animation in HTML5 before, it’s most likely been in the context of “mixed animation” such as in these two examples, offered up by a Medium article all about animating HTML5:

    Another of a similar nature was recently shared by jooma, a very helpful little project that can be used to turn any snippet of HTML5, such as that of the Complete Works of Shakespeare, into an HTML5 video, https://www.yarbook.com/upload/files/2022/06/cSBnxZ7XoR5JArPweWMQ_04_9d486c8cb88aecbc7b9e7b57c3e86d57_file.pdf
    ec5d62056f taurdais

  15. fabydary表示:

    Please do not use my software in any commercial applications. If you do, I don’t receive any payments for this software.

    Easy to use and super easy to modify, customize and replace. – If you like current template please vote and if you don’t like you can use The Choice theme to set up your own template – I know you will love The Choice and that is true for all the themes out there 😉

    Pryvets is a very simple but still attractive https://eroticorchid.com/wp-content/uploads/2022/06/randuliv.pdf
    ec5d62056f fabydary

  16. black seed表示:

    Hi, do have a e-newsletter? In the event you don’t definately should get on that piece…this web site is pure gold!

  17. daraotto表示:

    their favorite feature in the next best option. They also really liked the AlertMe feature. They said this: “It really sounds like a lot of admins could benefit from the app. It’s awesome to see someone who understands their importance in today’s day of technology and how it’s part of our everyday life.”

    Billerica, Massachusetts (US) – UpEver is an app that many young professionals and recent college grads like to https://emperiortech.com/music/the-mumbai-118-hindi-dubbed-movie-720p-download/
    ec5d62056f daraotto

  18. ulrdelm表示:

    CometMarks supports the following browsers: Internet Explorer 6, Firefox 2, 3, 4 and 5, Opera and Internet Explorer Mobile. Web Applications CometMarks acts not only as the bookmark synchronization client, it also allows you to get all links from any web browsers to your personal bookmark manager. So you can view all your bookmarks on your web browser just like the one you used to make the bookmarks.
    CometMarks is FREE to use, you have to do is enter your https://peaceful-woodland-81921.herokuapp.com/32Bit_RamPatch_Unlock_Upto_64GB_RAM_in_32_bit_Windows.pdf
    ec5d62056f ulrdelm

  19. markal表示:

    In addition, you can use it as a dictionary and experience its intelligent abilities.

    Artix Entertainment has announced their newest gaming product, Men’s Room Panic, “Men’s Room Panic” is designed as a quick fun game for 1-4 players. It has been crafted to provide a fresh new take on the traditional horizontal snake game, and to add a few more tactical twists. The new game type fills a niche in the role playing games market, where the https://vincyaviation.com/wp-content/uploads/2022/06/meignei.pdf
    ec5d62056f markal

  20. chadkal表示:

    Q:

    If $m=n\geq0$ is an integer, show that $\frac{m!}{(m+n)!}=\frac{m}{m+n+1}+\frac{n}{m+n+1}$

    Here is a problem about binomial coefficient that I find it is very difficult to understand.

    If $m=n\geq0$ is an integer, show that $$\frac{ https://2figureout.com/wp-content/uploads/2022/06/helaolym.pdf
    ec5d62056f chadkal

  21. galdery表示:

    System requirements:
    – Windows Operating Systems (supported and unsupported)
    – Available disk space: 100 MB

    As part of its development process and as an effort to provide an extra layer of security, the Espionage-Tunnel is developed with the purpose of obfuscating application data inside the event logs of the remote server during the so-called Man-in-the-middle attack. The Espionage-Tunnel performs the encryption during the connection of the remote client, https://www.cch2.org/portal/checklists/checklist.php?clid=5198
    ec5d62056f galdery

  22. marnei表示:

    With msmtp you can also specify an alias file and a mail destination. It is possible to choose files for destination for virtual users, fixed aliases, fixed email addresses, aliases marked for blocked users, and for completely blocked users, it is possible to specify to use the LHOST or RHOST fields of the inbound for local recipients; to specify a list of public IPs in a given domain, or even specify that only certain addresses should be allowed to use this application. https://atlantickneerestoration.com/wp-content/uploads/2022/06/thebapt.pdf
    ec5d62056f marnei

發佈留言

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