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

  1. Trefcdd表示:

    Здравствуйте!
    Как официально купить аттестат 11 класса с упрощенным обучением в Москве
    nsibirsk.ru/forum/free/topic-24300.html
    Рады оказать помощь!.

  2. Trefcbt表示:

    Здравствуйте!
    Реально ли приобрести диплом стоматолога? Основные этапы
    http://www.brodyaga.org/club/user/110627/blog/6166
    Рады оказать помощь!.

  3. LutherExase表示:

    Anderson Silva https://killer-bees-muay-thai-college.andersonsilva.net was born in 1975 in Curitiba Brazil. From a young age he showed an interest in martial arts, starting to train in karate at the age of 5.

  4. Trefnhe表示:

    Привет, друзья!
    Приобретение диплома ПТУ с сокращенной программой обучения в Москве
    http://www.altasugar.it/new/index.php?option=com_kunena&view=topic&catid=2&id=88601&Itemid=151
    Поможем вам всегда!.

  5. Danrclj表示:

    Привет!
    Где заказать диплом по необходимой специальности?
    Мы изготавливаем дипломы любой профессии по приятным ценам.
    аржаники.рф/memberlist.php?sk=a&sd=a&first_char=r&start=200

  6. Danrtcm表示:

    Добрый день!
    Где приобрести диплом по нужной специальности?
    Мы изготавливаем дипломы любой профессии по приятным тарифам.
    dedadi.ru/obshhestvo/nacionalnyy-sostav-moskva.html

  7. En guvenilir online casino Sweet bonanza

  8. Danrbah表示:

    Привет!
    Где приобрести диплом специалиста?
    Мы готовы предложить дипломы любых профессий по приятным тарифам.
    portaltrav.ru/product/conditioner/wall-air-conditioners/electrolux-eacs-07hlo-n3-16y/

  9. WilliamDeeli表示:

    Добрый день!
    Наша компания предлагает быстро и выгодно купить диплом, который выполнен на оригинальном бланке и заверен мокрыми печатями, водяными знаками, подписями должностных лиц. Диплом способен пройти лубую проверку, даже при использовании специально предназначенного оборудования. Решите свои задачи максимально быстро с нашей компанией.
    ethnoglobus.az/index.php?subaction=userinfo&user=owujil
    Успешной учебы!

  10. WilliamDeeli表示:

    Добрый день!
    Наши специалисты предлагают максимально быстро купить диплом, который выполнен на бланке ГОЗНАКа и заверен печатями, водяными знаками, подписями. Документ пройдет любые проверки, даже с применением специального оборудования. Достигайте свои цели быстро и просто с нашей компанией.
    houseinform.ru/forum/kupit_diplom_v_novosibirske
    Удачи!

  11. Diplomi_qgkl表示:

    заказать диплом о высшем образовании заказать диплом о высшем образовании .

  12. Uazracd表示:

    Добрый день!
    Где приобрести диплом по нужной специальности?
    forum.safe-animals.ru/index.php?showtopic=30579
    Успехов в учебе!

  13. Diplomi_ofkl表示:

    качественные дипломы купить asxdiplomik24.ru .

  14. Diplomi_eskl表示:

    купить диплом образования в нижнем тагиле http://diploms-x.com/ .

  15. Uazryol表示:

    Добрый день!
    Где купить диплом по необходимой специальности?
    vatrusha.maxbb.ru/viewtopic.php?f=2&t=691
    Хорошей учебы!

  16. Diplomi_pjkl表示:

    сколько в среднем стоит диплом о высшем образовании с занесением в реестр сколько в среднем стоит диплом о высшем образовании с занесением в реестр .

  17. Uazrlka表示:

    Здравствуйте!
    Приобрести диплом о высшем образовании.
    innovativeimo.org/read-blog/740

  18. Diplomi_bvkl表示:

    купить диплом королев http://www.diploms-x.com/ .

  19. Uazrwec表示:

    Добрый день!
    Купить диплом о высшем образовании.
    injectorcar.ru/forum/member.php?u=34916

  20. Manrtsz表示:

    Привет, друзья!
    Где приобрести диплом по необходимой специальности?
    Мы предлагаем документы институтов, которые находятся в любом регионе Российской Федерации. Вы можете заказать качественный диплом за любой год, включая сюда документы СССР. Дипломы печатаются на бумаге самого высокого качества. Это позволяет делать настоящие дипломы, не отличимые от оригиналов. Документы будут заверены всеми требуемыми печатями и подписями.
    Мы изготавливаем дипломы любых профессий по доступным ценам.
    ast-diplomy.com/kupit-diplom-vracha
    Рады помочь!

  21. Manrowe表示:

    Здравствуйте!
    Где заказать диплом специалиста?
    Мы можем предложить документы ВУЗов, которые находятся в любом регионе России. Вы можете заказать диплом за любой год, включая сюда документы старого образца. Дипломы делаются на бумаге самого высокого качества. Это позволяет делать государственные дипломы, которые невозможно отличить от оригиналов. Документы будут заверены необходимыми печатями и штампами.
    Мы изготавливаем дипломы любой профессии по приятным тарифам.
    ast-diploms24.ru/kupit-diplom-voronezh
    Рады помочь!

  22. Wazrhsy表示:

    Привет!
    Мы предлагаем документы ВУЗов, которые находятся на территории всей России. Можно купить диплом за любой год, в том числе документы старого образца. Документы делаются на бумаге высшего качества. Это дает возможности делать настоящие дипломы, которые не отличить от оригинала. Они будут заверены всеми требуемыми печатями и штампами.
    stlouisbluesclub.com/read-blog/327_why-is-the-popularity-of-universities-decreasing-nowadays.html?mode=day

  23. Wazrxip表示:

    Добрый день!
    Мы можем предложить документы техникумов, расположенных в любом регионе России. Вы имеете возможность купить диплом за любой год, включая документы СССР. Дипломы и аттестаты выпускаются на бумаге высшего качества. Это позволяет делать государственные дипломы, не отличимые от оригиналов. Они заверяются необходимыми печатями и штампами.
    http://www.support.ipron.com/communication/forum/index.php?PAGE_NAME=profile_view&UID=16945

  24. Manrmhy表示:

    Привет, друзья!
    Где приобрести диплом специалиста?
    Мы можем предложить документы институтов, расположенных на территории всей РФ. Вы сможете купить диплом от любого заведения, за любой год, включая документы СССР. Дипломы выпускаются на бумаге самого высокого качества. Это дает возможность делать государственные дипломы, не отличимые от оригиналов. Они будут заверены всеми требуемыми печатями и штампами.
    Мы изготавливаем дипломы любых профессий по доступным тарифам.
    ast-diplomy.com/kupit-diplom-vracha
    Всегда вам поможем!

  25. Wazrlpn表示:

    Здравствуйте!
    Мы можем предложить документы ВУЗов, которые находятся в любом регионе России. Можно купить качественно сделанный диплом за любой год, указав актуальную специальность и оценки за все дисциплины. Дипломы и аттестаты выпускаются на “правильной” бумаге высшего качества. Это позволяет делать государственные дипломы, которые не отличить от оригинала. Документы будут заверены всеми обязательными печатями и штампами.
    allukrnews.ru/put-k-professionalnomu-priznaniyu-pokupka-diploma-kak-reshenie

  26. Lazrrll表示:

    Привет!
    Где купить диплом по необходимой специальности?
    Заказать диплом о высшем образовании.
    blogs.rufox.ru/~worksale/48373.htm

  27. Lazraya表示:

    Здравствуйте!
    Где заказать диплом специалиста?
    Приобрести диплом о высшем образовании.
    http://www.golf.od.ua/forum/viewtopic.php?p=77817#77817

  28. Zazrepd表示:

    Добрый день!
    Заказать документ института вы имеете возможность в нашей компании в столице. Мы оказываем услуги по изготовлению и продаже документов об окончании любых ВУЗов РФ. Вы сможете получить необходимый диплом по любой специальности, любого года выпуска, включая документы СССР.
    datasphere.ru/club/user/15/blog/
    Удачи!

發佈留言

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