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

  1. Lazrylq表示:

    Привет, друзья!
    Мы предлагаем дипломы психологов, юристов, экономистов и любых других профессий по приятным ценам.
    telegra.ph/kupit-spravku-ob-obuchenii-v-vuze-moskva-08-02

  2. Lazrzcs表示:

    Добрый день!
    Мы готовы предложить дипломы психологов, юристов, экономистов и любых других профессий по невысоким ценам.
    telegra.ph/zakazat-spravku-ob-obuchenii-v-vuze-08-02

  3. DouglasGed表示:

    mexican border pharmacies shipping to usa: Medicines Mexico – mexican drugstore online

  4. Leonardpar表示:

    https://indiapharmacy.shop/# india pharmacy mail order

  5. Cazramy表示:

    Добрый день!
    Заказать диплом о высшем образовании
    telegra.ph/dopolnitelnye-bally-pri-postuplenii-v-vuz-2019-08-02

  6. Cazrwwo表示:

    Здравствуйте!
    Купить диплом о высшем образовании
    telegra.ph/celevoe-obuchenie-v-medicinskom-vuze-spb-08-02

  7. Sazrxpc表示:

    Здравствуйте!
    Диплом специалиста
    telegra.ph/distancionnoe-obuchenie-v-moskve-gosudarstvennyj-vuz-08-02

  8. Sazrvih表示:

    Добрый день!
    Диплом по специальности на выбор
    telegra.ph/nuzhna-li-medspravka-pri-postuplenii-v-vuz-08-02

  9. Cazrkbg表示:

    Привет, друзья!
    Заказать диплом о высшем образовании
    telegra.ph/dopolnitelnye-bally-pri-postuplenii-v-vuz-2019-08-02

  10. Sazroff表示:

    Привет!
    Диплом бакалавра
    telegra.ph/kak-schitat-bally-dlya-postupleniya-v-vuz-08-02

  11. Thomasknith表示:

    Life is Good — почему произошёл технический СКАМ проекта
    жесткое гей порно
    Компания «Life Is Good» позиционировала себя как финансово-консалтинговый проект. Она привлекала денежные активы от клиентов, формируя из них инвестиционные вклады, которые приносят пассивный доход от 20% годовых в валюте.

    Официальный сайт компании — lifeisgood.company. Ценной информации на нем очень мало. В разделе «О компании» вместо рассказа о том, чем занимается компания, — общие фразы про финансовую независимость и благополучие клиентов, а также шесть рекламных роликов с известными людьми.
    Данная компания создана в 2014 году. Зарегистрирована в государстве-офшоре Белиз, что находится в Центральной Америке. Соответственно, выданный там сертификат не имеет на территории России никакой юридической силы. Лицензия ЦБ РФ отсутствует.

    Руководитель компании — Роман Василенко, обладатель многочисленных фотошопных регалий, количеству которых позавидовал бы даже Александр Невский (уот так уот), ветеран МЛМ движения в РФ, ну практически святой человек.

    С 1990 года по 1999 год служил в Вооруженных силах РФ.

    После службы работал в инвестиционной компании Save-Invest (Si), зарегистрированной в Швейцарии, которая обещала инвестиционные продукты со сверх доходностью. В 2000х годах газета Коммерсантъ выпустила статью о расследовании сотрудников ФСБ на предмет ведения мошеннической деятельности в РФ.

    В 2012 году руководитель Оренбургского управления Татьяна Горынина, обманувшая своих клиентов на 50 млн. получила 6 лет тюрьмы за мошенничество.

    Далее работал в инвестиционной компании “Life Division”, которая до сих пор продолжает свою работу.

    Также Роман активно ведёт блог в инстаграмме и на ютуб, темы всё те же — успешный успех, освободись от рабства, нужно только захотеть и т.д.

    Участники делали ежемесячные взносы в счет стоимости будущей квартиры. Значительная часть средств шла организаторам компании, а все остальное делились между вышестоящими пайщиками.
    Наступила стадия «критического дна», т.е. взносов от новичков поступало меньше, чем необходимо выплачивать более «старым» клиентам, основатели компании приостановили свою деятельность, а суммы, которые многие годы вносили пайщики, им просто не вернули.

    Life Is Good позиционировала себя как европейская компания, но привлекала в основном Россиян. Кстати, официальный сайт Life is Good переведен сразу на 9 языков. Непонятно для чего это сделано, ведь компания работает только в России, Казахстане и Киргизии. Наверное, поэтому над переводом на английский язык здесь не стали заморачиваться. С первого взгляда видны грубые грамматические ошибки.

    Компания работала в сотрудничестве с еще тремя: Best Way, Hermes Management и Vista.

    Гарантий сохранности денег не давала ни «Лайф-из-гуд», ни «Гермес-менеджмент». Но при этом «Лайф-из-гуд» все же предлагала страхование вложенных денег по оригинальной схеме.

  12. DouglasGed表示:

    order ed pills online: ED meds online with insurance – edmeds

  13. Mazreat表示:

    Привет, друзья!
    Узнайте, как приобрести диплом о высшем образовании без рисков
    naturessunshine-nataly.blogspot.com/2012/08/xxi-l

  14. Mazrhfm表示:

    Привет!
    Легальная покупка диплома о среднем образовании в Москве и регионах
    rus-troika.ru/forum/index.php

  15. Mazrxni表示:

    Здравствуйте!
    Удивительно, но купить диплом кандидата наук оказалось не так сложно
    format-a3.ru/events/event-374/blog-posts/35#cmnt-1067657

  16. Lazrkpz表示:

    Добрый день!
    Приобрести диплом университета.
    telegra.ph/modulnaya-sistema-obucheniya-v-vuze-08-02

  17. Lazrjcm表示:

    Привет, друзья!
    Заказать диплом о высшем образовании.
    telegra.ph/kompensaciya-za-obuchenie-v-vuze-08-02

  18. Cazrfvc表示:

    Привет!
    Мы предлагаем документы ВУЗов
    filmchik.3dn.ru/forum/5-41-1#3612

  19. Cazrtez表示:

    Привет!
    Мы готовы предложить документы техникумов
    perevozchikovaes.blogspot.com/2014/04/3-things-i-couldnt-live-without-write

  20. Lazrdyy表示:

    Добрый день!
    Купить диплом университета.
    telegra.ph/metody-obucheniya-v-vuze-08-02

  21. Cazripi表示:

    Здравствуйте!
    Мы можем предложить документы ВУЗов
    smeshlivaja.blogspot.com/2014/04/blog-post

  22. Mazrbxc表示:

    Добрый день!
    Как избежать рисков при покупке диплома колледжа или ПТУ в России
    forum.asella.ru/index.php?threads/читайте-тут-x578l.6234

  23. Mazrxxv表示:

    Здравствуйте!
    Сколько стоит диплом высшего и среднего образования и как его получить?
    lisagerrard99.blogspot.com/2015/10/blog-post_23

  24. Mazrbyi表示:

    Здравствуйте!
    Как не попасть впросак при покупке диплома колледжа или ПТУ в России
    vpereplete.blogspot.com/2013/05/blog-post_9

  25. Отличный сайт! Всем рекомендую!печать листовок в Тюмени

發佈留言

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