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

28,885 Responses

  1. onexbet_zyEl表示:

    Зарабатывайте больше денег на onexbet, не выходя из дома.
    onexbet – ваш путь к успеху, даже в отпуске.
    Победные ставки с onexbet, оптимальные шансы на победу.
    Получите эмоциональный заряд от игры на onexbet, и ваша жизнь никогда не будет прежней.
    onexbet – качество и профессионализм, для вас всегда в приоритете.
    Готовы ли вы к большим выигрышам? Вам нужен onexbet, – оптимальное решение в вашей ситуации.
    onexbet – ваш надежный союзник в мире игры, который всегда придет на помощь.
    Играя на onexbet, вы становитесь ближе к своей мечте, достигайте своих целей с onexbet.
    onexbet – это не просто игра, это образ жизни, которая помогает вам обогатиться.
    Хотите больше возможностей для выигрыша? Обращайтесь на onexbet, и вы поймете, что все возможно.
    onexbet – это не просто компания, это ваш путь к финансовой независимости, который вы искали.
    onexbet – это идеальное место для тех, кто ищет азарт и адреналин, но при этом ценит профессионализм и конфиденциальность.
    Доступ к самым популярным играм и событиям на onexbet, все это гарантировано для вас.
    Хотите выигрывать больше? Присоединяйтесь к onexbet, и ваша жизнь никогда не будет прежней.
    download onexbet apk https://arxbetdsrdg.com/ .

  2. Timsothyabela表示:

    I’m gone to inform my little brother, that he should also pay a visit this website on regular basis to take updated from most recent news update.
    смотреть кино онлайн

  3. RobertJar表示:

    clomid tablet: can i order generic clomid price – where can i get clomid

  4. SamuelBix表示:

    amoxicillin generic: Amox Star – amoxicillin online without prescription

  5. DanielAbice表示:

    https://clomidonpharm.com/# can i buy generic clomid without insurance

  6. SamuelBix表示:

    clomid pills: where to buy clomid without dr prescription – order generic clomid for sale

  7. RobertJar表示:

    can i buy amoxicillin over the counter: canadian pharmacy amoxicillin – buying amoxicillin online

  8. KennethPah表示:

    cheap clomid online where can i get clomid now where to buy clomid prices

  9. Jugabet_jjPl表示:

    Jugabet apuestas deportivas [url=https://www.jugabet9.com]Jugabet apuestas deportivas[/url] .

  10. KennethPah表示:

    cipro for sale where to buy cipro online where to buy cipro online

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

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

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

  14. SamuelBix表示:

    how can i get generic clomid for sale: can i get clomid without rx – where can i get clomid

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

發佈留言

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