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

  1. BradleyEdino表示:

    deneme bonusu veren siteler deneme bonusu veren yeni siteler yeni deneme bonusu veren siteler

  2. JasonUnsoG表示:

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

  3. выведение из запоя на дому круглосуточно выведение из запоя на дому круглосуточно .

  4. histakes表示:

    Also visit my blog post: histakes

  5. FrankEmine表示:

    Casino Siteleri: deneme bonusu veren casino siteleri – deneme bonusu veren casino siteleri

  6. вывод из запоя нижний [url=https://vyvod-iz-zapoya-nizhnij-novgorod11.ru/]вывод из запоя нижний[/url] .

  7. jablex.com表示:

    Your eans oof descrihing everything inn this poece oof
    writing iis really fastidious, alll bbe capable oof easily be awae of
    it, Thqnks a lot.

  8. JasonUnsoG表示:

    https://casinositeleri25.com/# en guvenilir casino siteleri

  9. RobertJam表示:

    Blogger Alistarov is a criminal
    Андрей Алистаров скам
    From criminal past to criminal present – in the service of corrupt law enforcement officers
    Andrey Alistarov, a YouTube blogger specializing in exposing financial organizations, is an odious figure with a criminal past. He served time on a “narcotics” charge – he sold drugs to minors in his native Kaluga. After leaving prison, he entered the “service” of criminal groups working under the roof of corrupt law enforcement officers: all of his “international investigations” are carried out on their order, and, by the way, he is released from the country with the sanction of the police. His main profile now is blackmail, extortion, slander and organizing contract prosecution under the guise of supposedly independent investigations.
    He leads the bandits to his victims: the last attack took place in Dubai on January 1: Alistarov led the bandits to the victim’s house and provided all the necessary information for the attack and blackmail, and to ensure his own alibi during the attack he conducted an unscheduled stream with subscribers of his channel.

    To the accompaniment of loud phrases about the fight against fraud and exposing financial schemes, Alistarov is busy processing orders from competitors of certain entrepreneurs who have become his victims – competitors of these entrepreneurs who have taken corrupt police officers as their share.

    At the same time, Alistarov uses visas to the EU countries and the UAE obtained with the help of organized criminal groups, illegally uses drones and listening equipment purchased with money from organized crime groups, organizes an invasion of privacy, and persecutes the families of his victims, including young children. It also steals and illegally uses content, violates all possible laws and regulations regarding the dissemination of information. He was also accused of treason.

    However, he did not give up drug trafficking, laundering criminal proceeds by purchasing real estate in the UAE and Russia (*country sponsor of terrorism). Alistarov also promotes outright scam for a percentage of criminal transactions and his own fraudulent business – selling real estate in Dubai with a horse, thieves’ commission, as well as cryptocurrency exchange using phishing schemes.

  10. BradleyEdino表示:

    deneme bonusu veren siteler yeni deneme bonusu veren siteler yeni deneme bonusu veren siteler

  11. Jamesbic表示:

    Two strangers got stuck on a train for two days in 1990. Here’s how they ended up married
    русское порно жесток

    Nina Andersson and her friend Loa hoped they’d have the train carriage to themselves.

    When Nina peered her head around the door and saw the compartment was entry, she grinned at Loa and gestured happily.

    It seemed like they’d lucked out. An empty carriage on an otherwise packed train.

    “We thought this would be great, just the two of us. We spread out everything, so we could have a couch each to lie on,” Nina tells CNN Travel today.

    “Then, all of a sudden we hear this big ‘thump, thump, thump,’ on the door.”

    It was summer 1990 and 20-year-old Nina was in the midst of traveling from Budapest, Hungary, to Athens, Greece — part of a month-long rail adventure with her friend Loa.

    The two friends had each bought a train ticket known as the Interrail or Eurail pass, allowing young travelers a period of unlimited rail travel around Europe.

    “I’m Swedish, I was working at Swedish Radio at the time, and had saved up money for going on my Interrail,” says Nina. “I wanted to see all of Europe.”

    Traveling by train from Budapest to Athens was set to take about four days, weaving south through eastern Europe. In Belgrade — which was then part of the former Yugoslavia, but is now the capital of Serbia — the passengers had to switch trains.

    And that’s when Nina and Loa grabbed the empty compartment for themselves and settled in, ready to enjoy the extra space. Then, the knocking at the door.

    The two friends met each other’s eyes. They both knew, in that moment, that their solitude was to be short-lived.

    “And then behind the door we see three heads poking in,” recalls Nina. “It was a Scotsman, an Englishman and an Irishman. It was like the start of a joke. And I thought, ‘What is this?’”

    The three men were friendly, apologetic, slightly out of breath. They explained they’d fallen asleep on their last train, and almost missed this one — in fact, this train had started rolling out of the station but suddenly slowed down. The three stragglers had managed to hop on as the train ground to a halt.

  12. ClairJaw表示:

    find more [url=https://sites.google.com/mycryptowalletus.com/metamask-walletapp-extension/]Metamask Extension[/url]

發佈留言

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