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

21,495 Responses

  1. Всем рекомендую!доставка пиццы уфа
    Ресторан доставки “Василий” осуществляет доставку по всему городу Уфа. Заказы готовятся только после поступления и доставляются бесплатно при заказе от 500 рублей, в зависимости от района вашего проживания. Обратите внимание, что десерты и напитки не учитываются в стоимость минимальной суммы заказа. Доставка осуществляется курьерской службой в специальных качественных термосумках. Среднее время ожидания заказа 45-90 минут, время доставки может меняться в зависимости от количества заказов, дорожной обстановки и погодных условий. Пункт самовывоза находится по адресу ул. Шафиева 50/1.

  2. Всем рекомендую!доставка суши уфа
    Ресторан доставки “Василий” осуществляет доставку по всему городу Уфа. Заказы готовятся только после поступления и доставляются бесплатно при заказе от 500 рублей, в зависимости от района вашего проживания. Обратите внимание, что десерты и напитки не учитываются в стоимость минимальной суммы заказа. Доставка осуществляется курьерской службой в специальных качественных термосумках. Среднее время ожидания заказа 45-90 минут, время доставки может меняться в зависимости от количества заказов, дорожной обстановки и погодных условий. Пункт самовывоза находится по адресу ул. Шафиева 50/1.

  3. Всем рекомендую!Доставка еды уфа
    Ресторан доставки “Василий” осуществляет доставку по всему городу Уфа. Заказы готовятся только после поступления и доставляются бесплатно при заказе от 500 рублей, в зависимости от района вашего проживания. Обратите внимание, что десерты и напитки не учитываются в стоимость минимальной суммы заказа. Доставка осуществляется курьерской службой в специальных качественных термосумках. Среднее время ожидания заказа 45-90 минут, время доставки может меняться в зависимости от количества заказов, дорожной обстановки и погодных условий. Пункт самовывоза находится по адресу ул. Шафиева 50/1.

  4. Отличный Консалтинговый центр! Всем рекомендую!гражданство Молдовы по рождению представляет собой 15-летний опыт юристов собранный в едином центре услуг. Наша миссия – предоставить возможность любому гражданину оформить гражданство Молдовы и Румынии в соответствии с законодательными нормами страны.

  5. Отличный Консалтинговый центр! Всем рекомендую!гражданство Румынии представляет собой 15-летний опыт юристов собранный в едином центре услуг. Наша миссия – предоставить возможность любому гражданину оформить гражданство Молдовы и Румынии в соответствии с законодательными нормами страны.

  6. Отличный Консалтинговый центр! Всем рекомендую!гражданство Молдовы представляет собой 15-летний опыт юристов собранный в едином центре услуг. Наша миссия – предоставить возможность любому гражданину оформить гражданство Молдовы и Румынии в соответствии с законодательными нормами страны.

  7. Дуже крутий сайт! Всім рекомендую! розетка

  8. Дуже крутий сайт! Всім рекомендую! hjptnrf

  9. Дуже крутий сайт! Всім рекомендую! розетка

  10. Дуже крутий сайт! Всім рекомендую! rozetka

  11. Danielsnose表示:

    https://clomiphenecitrate.pro/# generic clomid

  12. StevePat表示:

    clomid purchase clomid online no prescription

  13. HellyJap表示:

    darknet market list free dark web

  14. Lloydbic表示:

    hinge dating site single senior dating site online

  15. Jancorce表示:

    darknet search engine tor market links

  16. DavidKah表示:

    darknet market links deep dark web

發佈留言

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