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

14,570 Responses

  1. Shaneevige表示:

    Делаем отличное предложение вам сделать консультацию (аудит) по умножению продаж также прибыли в вашем бизнесе. Формат аудита: персональная встреча или онлайн конференция по скайпу. Делая верные, но простые действия, результат от ВАШЕГО коммерциала получится превознести в много раз. В нашем запасе более 100 испытанных фактических вариантов увеличения продаж а также прибыли. В зависимости от вашего коммерциала выберем для вас максимально наилучшие и начнем шаг за шагом реализовывать.
    http://r-diplom.ru/

  2. где купить аккаунт телеграмм где купить аккаунт телеграмм .

  3. Eddiepiomb表示:

    רוצים. סטריפטיז מקצועי או חובבני, עיסויים – הכל אפשרי איתן. להזמין נערות ליווי בבת ים בקלות חוזר הביתה מהצבא לסוף שבוע קצר קרובות נשים, בעיקר המקצועניות שעובדות בספא או דירות דיסקרטיות ברחובות הרבה זמן, מביאות צעצועים איתן. עם זאת, דמיינו את תיקה של דירות סקס בתל אביב

  4. Mathew Langen表示:

    Engaging with The work is as thrilling as a spontaneous road trip. Where to next?

  5. где купить телеграмм аккаунт http://www.kupit-akkaunt-telegramm11.ru .

  6. Wilfrednoilm表示:

    ולקבל תשובות כנות לחלוטין על דירות דיסקרטיות באשדוד. פינוק משפיע על יצירה של הורמונים נערות דירות דיסקרטיות באשדוד, שרוצות להכיר להזמין שבוע מראש. אם יש חדר פנוי תקבלו אותו מייד. וכאשר אנו אומרים מייד, הכוונה היא שניתן להגיע בכל שעה. כאן אין שעות כניסה נערות ליווי באשדוד

  7. купить аккаунт телеграмм с подписчиками http://www.kupit-akkaunt-telegramm11.ru/ .

  8. O melhor cassino para grandes vitorias Blaze

  9. Sua sorte em um cassino confiavel Blaze

  10. купить аккаунт телеграмм с подписчиками http://www.kupit-akkaunt-telegramm11.ru .

  11. kerassentials表示:

    I like the helpful information you supply to your articles. I’ll bookmark your weblog and test again right here regularly. I am fairly certain I will be informed plenty of new stuff right here! Best of luck for the next!

  12. KennethFom表示:

    המעסות המקצועיות והחובבניות שמספקות שירותי עיסוי אירוטי או מרגיע לגברים ולנשים. עיסוי הוא לא רק מתודה פיזית של התחדשות וריפוי. בחיפה בדרך כלל כוללות חנייה צמודה ופנימית, דבר המאפשר לכם להגיע ישירות לחדר ומבלי שאף אחד יראה את הרכב שלכם ברחוב. זהו יתרון ענק ליווי מבוגרות

  13. CharlesVAT表示:

    интернет эквайринг https://internet-ekvajring.kz – безопасные и эффективные платежные решения для вашего бизнеса.

  14. DichaelDax表示:

    I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored subject matter stylish. nonetheless, you command get bought an edginess over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this increase.
    kuhovarka.ru

  15. AdrianLoals表示:

    אנשים רבים אוהבים לקחת נערות ליווי במרכז אל דירות דיסקרטיות דווקא ולא בתי מלון מכיוון שדירות דיסקרטיות מאפשרות להם להגיע מתי שהם בשום מקום אחר. זוהי הזדמנות להגשים חלומות, לשחרר אנרגיות רעות ולבלות עם נערות מובחרות. הבילוי נעשה באווירה נעימה ודיסקרטית, נערות ליווי בראשון לציון

  16. OLaneevige表示:

    I loved as much as you will receive carried out right here. The sketch is tasteful, your authored material stylish. nonetheless, you command get got an shakiness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this hike.
    новое ретро казино

  17. Desfrute da emocao no melhor cassino Blaze

  18. Franklip表示:

    интернет эквайринг https://internet-ekvajring.kz – безопасные и эффективные платежные решения для вашего бизнеса.

發佈留言

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