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

22,418 Responses

  1. DouglasGed表示:

    purple pharmacy mexico price list: Certified Mexican pharmacy – medication from mexico pharmacy

  2. Charleshon表示:

    http://mexicopharmacy.win/# purple pharmacy mexico price list
    pills for erectile dysfunction online

  3. Lazrdky表示:

    Здравствуйте!
    Мы изготавливаем дипломы любых профессий по выгодным ценам.
    diploms-rushkas.ru/kupit-diplom-samara

  4. Mazrung表示:

    Здравствуйте!
    Как получить диплом техникума с упрощенным обучением в Москве официально
    diplomrushkan.ru

  5. Mazriri表示:

    Добрый день!
    Рекомендации по безопасной покупке диплома о высшем образовании
    diplomrushkan.ru

  6. Mazrpro表示:

    Привет, друзья!
    Как приобрести аттестат о среднем образовании в Москве и других городах
    diplomrushkan.ru

  7. Check out my page; Daycare Near Me – Find The Best Daycares
    Near You (ghasemtorabi.ir)

  8. Trefisz表示:

    Добрый день!
    Полезные советы по безопасной покупке диплома о высшем образовании
    diploms-man.ru/kupit-diplom-ekaterinburg
    Рады оказаться полезными!.

  9. Trefgya表示:

    Добрый день!
    Полезные советы по безопасной покупке диплома о высшем образовании
    mandiplomiks.ru/kupit-diplom-ryazan
    Всегда вам поможем!.

  10. Trefitx表示:

    Здравствуйте!
    Официальная покупка диплома ПТУ с упрощенной программой обучения
    mans-diplomyxx.ru/kupit-diplom-voronezh
    Всегда вам поможем!.

  11. Diplomi_koEa表示:

    Добрый день!
    Заказать документ ВУЗа можно в нашей компании.
    rushkas-diploms.ru

  12. Diplomi_cfEa表示:

    Добрый день!
    Купить документ о получении высшего образования можно в нашей компании в Москве.
    rushkas-diplomasxx.ru

  13. Diplomi_huEa表示:

    Добрый день!
    Приобрести документ ВУЗа можно в нашем сервисе.
    rushkadiplomik.ru

  14. JimmyHab表示:

    Адвокаты Москвы
    консультация военного юриста
    Мы успешно защищаем права и свободы юридических и физических лиц. Колоссальный и зачастую уникальный опыт, а также высокая квалификация наших сотрудников позволяют нам достигать результата, в максимальной степени отвечающего интересам клиента. Наши специалисты состоят в адвокатской палате которая на сегодняшний день является наиболее авторитетной в России. Благодаря многочленным блистательным победам в громких и, по мнению многих, бесперспективных делах, наши сотрудники снискали уважение не только в РФ, но и за рубежом.
    Если вам нужен адвокат в Москве просто обратитесь к нам и вы получите квалифицированную помощь в решении ваших проблем. Как показывает практика, в большинстве дел, в которых принимали участие наши адвокаты, суд выносил решение в пользу их клиентов. Кроме того, мы осуществляем страхование своей ответственности на 5 млн рублей. Такие гарантии вам не предложит ни одна юридическая компания.

    Стоит отметить, что за все то время, что работает наша компания не было прецедента, когда в результате действий наших специалистов клиенту был бы нанесен ущерб и возникла необходимость в страховой поддержке.

    Адвокатские услуги
    Адвокаты и юристы Москвы оказывают услуги в различных областях права: гражданского, арбитражного, уголовного и др. Нашими клиентами являются жители как столицы, так и других городов России. Для решения задач, которые стоят перед нашим клиентом, мы готовы оказать разовую помощь правового характера или сотрудничать на постоянной основе.

  15. Mazrfzb表示:

    Привет, друзья!
    Процесс получения диплома стоматолога: реально ли это сделать быстро?
    rushkas-diploms.ru/kupit-diplom-vracha

  16. Mazruas表示:

    Привет, друзья!
    Купить диплом старого образца, можно ли это сделать по быстрой схеме?
    rushkadiplomiks.ru/kupit-diplom-medsestry

  17. Mazrzlr表示:

    Привет!
    Диплом техникума купить официально с упрощенным обучением в Москве
    rushkas-diplomxx.ru/diplom-sssr

  18. MelvinWal表示:

    , Настоящий рай для любителей азартных игр – зайдите и убедитесь сами.Панч бет

  19. Samueldub表示:

    http://sildenafil.llc/# buy viagra online

  20. Robertontof表示:

    Юридический портал Соцправ.ру
    образец исковое заявление
    – окажет вам помощь в решении сложных правовых проблем. У нас вы найдете качественную и грамотную юридическую поддержку в любой ситуации. Основной целью нашего проекта является помощь в защите ваших прав. Наши специалисты позаботятся о том, чтобы вы могли защитить свои интересы в любой проблемной ситуации. Мы предоставляем актуальную юридическую информацию по вопросам жилищного и земельного права, разделу имущества и алиментам, наследству, опеке и усыновлению. Если ваши права нарушены, специалисты нашего сайта всегда придут на помощь. Мы готовы оказать вам юридическую поддержку онлайн или по телефону в круглосуточном режиме.

  21. EarnestAvada表示:

    Hello there I am so grateful I found your website, I really found you by error, while I was searching on Bing for something else, Anyways I am here now and would just like to say thank you for a marvelous post and a all round entertaining blog (I also love the theme/design), I don’t have time to read through it all at the minute but I have saved it and also added in your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the awesome b.

    https://optimapharm.com.ua/novitni-tekhnologiyi-u-vygotovlenni-linz-dlya-far-scho-varto-znaty-avtovlasnykam

  22. JasonDuece表示:

    Fafabet South Africa
    fafabet sign up offer
    Step into the thrilling universe of Fafabet’s casino, a place pulsating with excitement and brimming with opportunities for big wins! Whether you’re a seasoned gambler or a curious newcomer, this review will guide you through the vibrant selection of top-tier games, enticing bonuses, effective strategies, and seamless mobile play. Get ready to transform your gaming experience and discover why Fafabet is the go-to destination for online casino enthusiasts!
    Best Casino Games at Fafabet
    brings the excitement of a real casino directly to your screen, featuring a curated selection of games that cater to both new and seasoned players. The focus on popular games such as roulette, blackjack, and poker ensures a varied and engaging experience, providing options for strategic play, quick wins, and everything in between. This selection is not just about variety; it’s tailored to enhance player engagement and retention. The inclusion of games with different levels of complexity and reward strategies meets the diverse needs and preferences of the global online gambling community, making Fafabet a top choice for live casino enthusiasts.

    Choose Your Game: Online Roulette, Blackjack, Poker
    The heart of Fafabet’s live casino lies in its comprehensive offering of classic games, which are among the most popular and enduring in the gambling world. Let’s focus on the star of the casino floor: Roulette. This game not only attracts players with its simplicity and elegance but also offers various versions to suit different tastes and betting styles.

  23. Michaelpoold表示:

    Benefits of mobile application
    pin-up casino app download
    Today, it is very popular among gambling companies to create mobile applications for the users who use the phone the most. Many users download a pin-up program to take advantage of this program, which is the functionality of the browser version of the gambling platform.
    If you decide to download the Pin-up mobile application, you can use this application. The company’s employees care about the comfort of their users. The program has many fans from the world of gambling. The company has worked hard to develop the program.

    the profit

    intuitive interface;

    attractive design;

    Various sporting events and gambling entertainments;

    high speed of application;

    economical use of Internet traffic;

    Fixed access to the application, unlike the browser version.
    where to download apps for android

    There are several ways to download a pin-up program:

    The download file is downloaded directly from the official website of the virtual gambling company. This is the safest and most reliable method because you do not need to be afraid of scammers when downloading from the site;

    It is also recommended to download programs from third-party sites, but first you need to make sure that it is the original file, as scammers can offer you the wrong file.

    Downloading the file is very fast and simple, even the most inexperienced user can easily install this program. On the official website of the company there are detailed instructions on how to install the file on Android.

發佈留言

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