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

  1. SEO_jiMa表示:

    поисковое сео продвижение сайтов в москве https://prodvizhenie-sajtov-v-moskve115.ru/ .

  2. Davidoxymn表示:

    Kylian Mbappe https://kylian-mbappe.psg-fr.com Footballeur, attaquant francais. Il joue pour le PSG et l’equipe de France. Ne le 20 decembre 1998 a Paris. Mbappe est francais de nationalite. La taille de l’athlete est de 178 cm.

  3. Stevepsymn表示:

    В чёрный список пирамид и лохотронов 31 августа 2022 года внесены следующие организации, обладающие признаками финансовой пирамиды или признаками мошенничества.
    геи жестко
    Etihad Rail (etihadrail-ae.com)

    Club Unite To Live, Life Is Good, Unite To Live (uniteto.live). Новый домен пирамиды находящегося в розыске Романа Василенко.

    TopBoom, «платформа хедж-фонда, специализирующегося на сделках с обратным исходом спортивного события» (topboom.vip, t.me/TopBoom001)

    Change Team, мошенники указывают реквизиты чужого юрлица ООО «АТТИС ГРУПП» (ОРГН 1207700314128, ИНН 9702022065), телеграм-канал «Change Team: Главный Канал» (change-team.ru). Фальшивый обменник раньше назывался C Exchange.
    Ещё лохотроны:
    Scam! Чёрный список пирамид и лохотронов и отзывы

    В чёрный список пирамид и лохотронов включены организации, имеющие признаки финансовой пирамиды по классификации Центрального банка; организации, обладающие признаками матричной пирамиды (массовый привод друзей, «столы»); сборы денег с пенсионеров и прочих незащищённых слоёв населения; хайпы; организации, имеющие негативные отзывы; структуры, оказывающие финансовые услуги без лицензии и прочие лохотроны за исключением псевдоброкеров, кооперативов (с ними тоже не рекомендуем связываться) и некоторых других категорий.

  4. Vincenthit表示:

    В чёрный список пирамид и лохотронов 31 августа 2022 года внесены следующие организации, обладающие признаками финансовой пирамиды или признаками мошенничества.
    большой анальный секс
    Etihad Rail (etihadrail-ae.com)

    Club Unite To Live, Life Is Good, Unite To Live (uniteto.live). Новый домен пирамиды находящегося в розыске Романа Василенко.

    TopBoom, «платформа хедж-фонда, специализирующегося на сделках с обратным исходом спортивного события» (topboom.vip, t.me/TopBoom001)

    Change Team, мошенники указывают реквизиты чужого юрлица ООО «АТТИС ГРУПП» (ОРГН 1207700314128, ИНН 9702022065), телеграм-канал «Change Team: Главный Канал» (change-team.ru). Фальшивый обменник раньше назывался C Exchange.
    Ещё лохотроны:
    Scam! Чёрный список пирамид и лохотронов и отзывы

    В чёрный список пирамид и лохотронов включены организации, имеющие признаки финансовой пирамиды по классификации Центрального банка; организации, обладающие признаками матричной пирамиды (массовый привод друзей, «столы»); сборы денег с пенсионеров и прочих незащищённых слоёв населения; хайпы; организации, имеющие негативные отзывы; структуры, оказывающие финансовые услуги без лицензии и прочие лохотроны за исключением псевдоброкеров, кооперативов (с ними тоже не рекомендуем связываться) и некоторых других категорий.

  5. Billyclore表示:

    Paul Labille Pogba https://paul-pogba.psg-fr.com Footballeur francais, milieu de terrain central du club italien de la Juventus. Champion du monde 2018. Actuellement suspendu pour dopage et incapable de jouer.

  6. Williamemore表示:

    The young talent who conquered Paris Saint-Germain: how Xavi Simons became https://xavi-simons.psg-fr.com leader of a superclub in record time.

  7. GeorgeVer表示:

    Mohamed Salah Hamed Mehrez Ghali https://mohamed-salah.liverpool-fr.com Footballeur egyptien, attaquant du club anglais de Liverpool et l’equipe nationale egyptienne. Considere comme l’un des meilleurs joueurs du monde.

  8. Kennethcek表示:

    Kevin De Bruyne https://kevin-de-bruyne.liverpool-fr.com Belgian footballer, born 28 June 1991 years in Ghent. He has had a brilliant club career and also plays for the Belgium national team. De Bruyne is known for his spectacular goals and brilliant assists.

  9. WilliamKnica表示:

    Канал для того, чтобы знания и опыт, могли помочь любому человеку сделать ремонт https://tvin270584.livejournal.com в своем жилище, любой сложности!

  10. Williamemore表示:

    Paul Labille Pogba https://pogba.com.az French footballer, central midfielder of the Italian club Juventus. Currently suspended for doping and unable to play. World champion 2018.

  11. JamesHyday表示:

    Paulo Bruno Ezequiel Dybala https://dybala.com.az Argentine footballer, striker for the Italian club Roma and the Argentina national team. World champion 2022.

  12. JeffreySer表示:

    Gianluigi Buffon https://buffon.com.az Italian football player, goalkeeper. Considered one of the best goalkeepers of all time. He holds the record for the number of games in the Italian Championship, as well as the number of minutes in this tournament without conceding a goal.

  13. Robertocix表示:

    Sergio Ramos Garcia https://sergio-ramos.com.az Spanish footballer, defender. Former Spanish national team player. He played for 16 seasons as a central defender for Real Madrid, where he captained for six seasons.

  14. DavidLen表示:

    Latest boxing news https://boks.com.az, Resul Abbasov’s achievements, Tyson Fury’s fights and much more. All in Ambassador Boxing.

  15. Rogerbeave表示:

    Explore the extraordinary journey of Kilian Mbappe https://kilian-mbappe.com.az, from his humble beginnings to global stardom. Delve into his early years, meteoric rise through the ranks, and impact on and off the football field.

  16. Arthurtat表示:

    Latest news, statistics, photos and much more about Pele https://pele.com.az. Get the latest news and information about football legend Pele.

  17. Bryoncug表示:

    Mesut Ozil https://mesut-ozil.com.az latest news, statistics, photos and much more. Get the latest news and information about one of the best football players Mesut Ozil.

  18. Java Burn表示:

    Heya! I’m at work browsing your blog from my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the superb work!

  19. TimothySwica表示:

    https://gadalke.ru/ – Меня зовут Мария Степановна, я потомственная ясновидяшая, предсказательница и знаю, зачем вы здесь. Уверена, вы получите ответ и помощь на моем официальном сайте. Каждый день сотни людей со сложными жизненными проблемами пытаются отыскать ответ на вопрос где найти настоящую хорошую гадалку с отзывами, проверенную многими людьми. Гадалку, которая реально помогает. По-разному называют нас: ясновидящая, маг, экстресенс и даже ведьмой назовут несведущие. Я не обижаюсь. Ведь все одно это: Дар, данный Богом. Шарлатанов, выдающих себя за гадалок теперь много стало. Да и гадание не сложная наука, научиться можно при должном упорстве и труде. Сейчас кто на чем гадает, кто на таро, кто на кофейной гуще, на рунах или на воске. Гадают, да не помогают. Потому как не по крови дано, а через ум вошло. А знать, ни порчу снять, ни мужа вернуть не сумеют — а я помогу!

  20. WilliamMaype表示:

    Read the latest Counter-Strike 2 news https://counter-strike.net.az, watch the most successful tournaments and become the best in the world of the game on the CS2 Azerbaijan website.

  21. Zacharyguisa表示:

    https://gadalika.ru/
    Меня зовут Ангелия, я родом из Молдавии. На данный момент живу и работаю в России. Я практик, настроенный на достижение целей моих клиентов. Свои силы я черпаю от корней своих предков. Когда я была совсем юной девочкой, во мне стал просыпаться дар ясновидения. С тех пор начался мой путь в этой сфере. Я заглядывала в прошлое, будущее и настоящее. Уже тогда я понимала что мой дар пойдёт на благо людям.

  22. Jamessurse表示:

    The latest analysis, tournament reviews and the most interesting features of the Spider-Man game https://spider-man.com.az series in Azerbaijani.

  23. RobertHer表示:

    Discover exciting virtual football in Fortnite https://fortnite.com.az. Your central hub for the latest news, expert strategies and interesting e-sports reports. Collecting points with us!

  24. Willieskali表示:

    Azerbaijan NFL https://nfl.com.az News, analysis and topics about the latest experience, victories and records. A portal where the most beautiful NFL games in the world are generally studied.

  25. berc__wyKa表示:

    Узнайте всю правду о берцах зсу, Почему берці зсу так важны для культуры?, Какова история появления берців зсу?, Одержимость берцами зсу, тайны, проникнитесь, смысл, проникнитесь, культурой, Почуйте, як б’ють від Берця зсу, погляньте, значення
    купити берці літні зсу купити берці літні зсу .

  26. berc__raKa表示:

    Откройте тайны берців зсу, Какую роль играют берці зсу в обрядах?, познакомьтесь с, Легенды и предания о берцах зсу, магию, проникнитесь, истину, Берці зсу: духовное наследие Украины, освойте, в душу, анатомію, таємниці
    військові берці зсу https://bercitaktichnizsu.vn.ua/ .

  27. MarvinHeify表示:

    Latest World of Warcraft (WOW) tournament news https://wow.com.az, strategies and game analysis. The most detailed gaming portal in Azerbaijani language

  28. TimothySwica表示:

    https://gadalika.ru/
    Меня зовут Вера Ивановна. Люди в России называют меня целителем души и тела. Да, я действительно обладаю даром исцеления и общения с духами. Силы для своей работы с энергиями я черпаю из древних истоков, уходящих в мою теперь уже далекую Монголию. Я обладаю навыками в области белой, черной и сефиротической магии. Сильное телепатическое чувство. Занимаюсь целительством, чувствую эмоции и физическое состояние других людей (клиентов).

  29. отремонтировать стиральную машину отремонтировать стиральную машину .

發佈留言

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