透過網頁讀取PSD後,依圖層輸出PNG檔案

在前面介紹過網頁可以讀取PSD檔案並擷取到該檔案的資訊,接著我們會希望能透過網頁上傳PSD檔之後,依照圖層來輸出圖片,同樣是利用PSD.js來輔助進行,可以透過我們製作的範例頁面來進行輸出測試。

預設輸出效果


透過PSD.js可將PSD內的各圖層輸出成PNG圖檔,亦可轉成Base 64圖檔格式,惟輸出時每個圖檔的尺寸並不會根據整體PSD檔大小來配置。

圖層配置

Layer 1 (421 x 38)
Layer 2 (490 x 479)
Layer 3 (1024 x 800)

<!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 PSD here</p>
  </div>
  <div id="image"></div>
  <pre id="data"></pre>

  <script type="text/javascript">
  (function () {
    const 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) {
		for (var i = 0; i < psd.layers.length; i ++){
			document.getElementById('image').appendChild(psd.layers[i].image.toPng());
		}
      });
    }
	
  }());
  </script>
</body>
</html>

依照整體PSD配置進行輸出


我們希望讓每個圖片在輸出後能保時相同的尺寸,也就是依照PSD的畫布大小來輸出每一張圖檔,但在原生PSD.js中並不具備這樣的功能,於是我們透過下述的方式來達成:

  1. 擷取PSD資訊並將圖檔轉為Base 64格式
  2. 產生與PSD尺寸大小相同的HTML Canvas
  3. 將產生的Base 64圖檔,依照原始位置放入Canvas中
  4. 將Canvas轉成PNG圖檔
圖層配置
Layer 1 (1024 x 800)
Layer 2 (1024 x 800)
Layer 3 (1024 x 800)

可以參考我們製作的範例頁面

<!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 PSD here</p>
  </div>
  <div id="image"></div>
  <pre id="data"></pre>
  <script type="text/javascript">
  (function () {
    const 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) {
    const PSDWidth = psd.tree().width;
    const PSDHeight = psd.tree().height;
    for (var i = 0; i < psd.layers.length; i ++){
      const img = new Image();
      img.src = psd.layers[i].image.toBase64();
      console.log(psd);
      const layerWidth = psd.layers[i].width;
      const layerHeight = psd.layers[i].height;
      const layerLeft = psd.layers[i].left;
      const layerTop = psd.layers[i].top;
      
      const canvas = document.createElement("canvas");
      canvas.setAttribute('class', "canvas");
      canvas.width = PSDWidth;
      canvas.height = PSDHeight;
      console.log("canvas :", canvas);
      img.onload = function(){
        canvas.getContext("2d").drawImage(img, layerLeft, layerTop, layerWidth, layerHeight);
        document.getElementById('image').appendChild(canvas);
      }
    }
      });
    }
  
  }());
  </script>
</body>
</html>

PSD檔案輸出限制


1. 無法輸出帶有效果的圖片

在PSD中我們可能會針對圖層套用一些效果,例如:陰影、光暈、筆畫…等等,但在輸出後的圖檔將不會帶有這些效果。

圖層設定

解決方法:透過點陣化圖層效果,即可輸出相對應的圖檔。

2. 無法輸出帶有遮色片效果的圖片

圖層設定
Before
After

解決方法:將圖層轉為智慧型物件,即可輸出相對應的圖檔。

3. 無法依圖層混合模式輸出圖片

Layer 1
Layer 2
Layer 3
Layer 4

解決方法:無法解決

You may also like...

61,742 Responses

  1. Профессиональный сервисный центр по ремонту моноблоков в Москве.
    Мы предлагаем: моноблоки кондиционеры
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  2. Walterphivy表示:

    Набиуллина выполняет заказ мафии

    Должностные лица ЦБ управляются тайными кукловодами
    Почти три года назад кооператив «Бест Вей» был включен в предупредительный список ЦБ – с этого начались его злоключения. Становится все более очевидным, что это заказная акция, в которой Центробанк действовал в интересах банковской мафии, принимая решения, которые никто даже не потрудился подтвердить документами и фактами.
    Осенью 2021 года потребительский кооператив «Бест Вей» – крупнейший российский кооператив, дававший возможность приобретать квартиры по всей России, в котором около 20 тыс. пайщиков, работающий с 2014 года, был включен в Список компаний с выявленными признаками нелегальной деятельности на финансовом рынке (предупредительный список) ЦБ – против него был использован относительно новый, только появившийся в 2021 году инструмент регулирования ЦБ на финансовом рынке.
    Притом, что примерно за полтора года до этого – в 2019 году – ЦБ в официальном письме по запросу одной из общественных организаций заявлял, что у него нет вопросов к кооперативу – и в силу того, что потребительский кооператив не подведомствен ЦБ, и в силу того, что Банку России ничего не известно о нарушениях, которые требовали бы его вмешательства как мегарегулятора финансового рынка.
    Однако в 2021 году все изменилось: включением в предупредительный список ЦБ попытался поставить кооператив вне закона, обрушить его деятельность. С включения в предупредительный список начались злоключения кооператива: блокирование его официальных информационных ресурсов, системы личных кабинетов и платежей, а затем и распространение на него уголовного дела, возбужденного той же осенью 2021 года по заявлением ряда клиентов иностранной компании «Гермес». Кооператив был объявлен аффилированной с «Гермесом» структурой, постановлением руководителя следственной группы ему был присвоен статус гражданского ответчика по уголовному делу.

    Липовые основания
    Но что лежало в основе включения в предупредительный список? Это стало известно недавно – из двух процессов в Приморском районном суде Санкт-Петербурга: уголовном, по обвинению бывших специалистов маркетинговой компании «Лайф-из-Гуд», сотрудничавшей с «Гермесом», в организации финансовой пирамиды, и гражданском – по иску Прокуратуры Санкт-Петербурга о признании кооператива «Бест Вей» незаконным.
    Оказывается, впервые справку о нарушениях в кооперативе подготовил в 2019 году некий центр компетенций Южного главка ЦБ в Краснодаре – который уже ликвидирован, архив этого подразделения также, видимо, ликвидирован: первоисточников решений нет – указывается, что это некие обращения граждан: каких граждан и что отмечается в обращении, не упоминается. При этом краснодарский центр указывал в отчете, что руководствовался методическими рекомендациями МВД РФ «Квалификация и расследование организации деятельности «финансовых пирамид».
    Далее Северо-Западный главк ЦБ (прежний руководитель – Надежда Савинская, нынешний руководитель – Ирина Петрова) – который обязан был провести собственную проверку по отношению к организациям в своей зоне ответственности (кооператив зарегистрирован в Санкт-Петербурге), просто переписывает документ из Краснодара – и направляет его в прокуратуру.
    Параллельно документ идет «наверх» – и (теперь уже бывший) руководитель Департамента противодействия недобросовестным практикам ЦБ Валерий Лях, который, насколько известно, уехал из России – допросить его в суде не удалось, подмахивает документ о включении кооператива в предупредительный список.
    При этом проверка деятельности кооператива не проводилась – никакая: ни выездная, ни камеральная. Документы у кооператива не запрашивались. Почему? А потому, объясняют представители ЦБ, что кооператив не является подведомственной ЦБ организацией и проверка была бы незаконной. То есть признать по выдуманным основаниям организацию недобросовестной и инициировать против нее уголовное дело можно, а проанализировать ее работу на основании подлинных документов нельзя.

    Основано на заказе
    ЦБ подкрепляет свое решение, во-первых, целыми восемью обращениями граждан – несколько более поздними, чем полумифические краснодарские. Но ни одно из которых не подано членом кооператива.
    Граждане интересуются в своих обращениях: кооператив законен? Нет ли к нему вопросов у регулирующих организаций?
    Во-вторых, актом осмотра официального сайта кооператива – в нем зафиксированы новости и структура личных кабинетов, больше ничего.
    То есть решение, заблокировавшее нормальную деятельность кооператива более чем на два года, приведшее к аресту его счетов, абсолютно ни на чем не основано. Вернее, основано на заказе мафии, стремящейся захватить кооператив и конкурентов, борющихся с кооперативом.
    При этом Центробанк рассказывает, что включение в список – это только информирование потенциальных потребителей финансовых услуг о рисках, но сам же себе противоречит, говоря, что именно ЦБ обратился в Роскомнадзор о блокировании информационных ресурсов кооператива, именно он обратился в прокуратуру и органы внутренних дел с предложением возбудить уголовное дело. И именно на основании письма его Северо-Западного главка уголовное дело начало расследоваться в том числе и в отношении кооператива. При этом за несколько лет расследования ни одного криминального эпизода не найдено: деятельность кооператива абсолютно юридически чиста.

    Ложь Набиуллиной
    По поводу судьбы кооператива «Бест Вей» и других кооперативов депутаты Государственной думы неоднократно обращались к руководству ЦБ, в том числе лично к Эльвире Набиуллиной. Они предлагали разобраться в ситуации, при необходимости ввести дополнительный контроль со стороны ЦБ, который снимет сомнения со стороны ведомства.
    Набиуллина в прошлом году публично пообещала на пленарном заседании Думы проработать вопрос кооперативов, совместно с депутатским корпусом выработать компромиссные предложения – но за более чем год ничего не сделано!
    Кооперация в России продолжает торпедироваться, а ведь это важнейший для экономического роста в стране сектор – способный аккумулировать миллиарды рублей (на счетах «Бест Вей» – более 4 млрд рублей!) и направить их в развитие экономики. Это важнейшее направление решения жилищного вопроса – альтернатива ипотеке, которая недоступна подавляющему большинству граждан и единственное, чему помогает, – это обогащению банков и мафии, стремящихся прибрать к рукам деньги граждан.

    Круговая порука
    Атаки центробанкиров на кооператив носят целенаправленный характер. Достоверно известно, что они велась с одобрения первого зампреда ЦБ Владимира Чистюхина – не говоря уже о бывшем и нынешнем руководителях Северо-Западного главка ЦБ Савинской и Петровой, бывшем директоре (упраздненного в прошлом году) Департамента противодействия недобросовестным практикам Валерии Ляхе, а также главе забравшего его функции Департамента небанковского кредитования Илье Кочеткове.
    Это не что иное, как круговая порука. В прошлом году к руководителю службы по защите прав потребителей и обеспечению доступности финансовых услуг ЦБ Михаилу Мамуте обратились по поводу очевидного нарушения законодательства – банки отказались исполнить судебное решение о снятии ареста со счетов кооператива (позднее арест был наложен снова). Мамута под мифическими предлогами отказался наказать банки.
    Очевидно, что происходит не что иное, как целенаправленное заказное преследование кооператива – в интересах неких сил, волю которых стремится исполнить Центробанк.
    Атаки, с одной стороны, в интересах банкиров, стремящихся установить ипотечную монополию и перекрыть кислород кооперации, а с другой – тайных кукловодов, стремящихся захватить более 4 млрд на счетах кооператива.
    Атака центробанкиров на кооператив должна быть вскрыта, расследована, виновные должны быть привлечены к ответственности!

  3. 10 Things That Your Family Teach You About Togel4d Login togel4d Login (togel-sydney46505.blogunteer.com)

  4. Профессиональный сервисный центр по ремонту гироскутеров в Москве.
    Мы предлагаем: где можно отремонтировать гироскутер
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  5. Профессиональный сервисный центр по ремонту моноблоков в Москве.
    Мы предлагаем: моноблоки недорого
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  6. Профессиональный сервисный центр по ремонту гироскутеров в Москве.
    Мы предлагаем: ремонт гироскутера
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  7. Профессиональный сервисный центр по ремонту моноблоков в Москве.
    Мы предлагаем: ремонт моноблоков в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  8. Kendra表示:

    What’s The Job Market For Link Togel Professionals Like?
    link togel (Kendra)

  9. Undisputed Proof You Need Jaguar Xf Key Cover Lost Jaguar Key Replacement

  10. Профессиональный сервисный центр по ремонту моноблоков в Москве.
    Мы предлагаем: моноблок москва
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  11. Профессиональный сервисный центр по ремонту кондиционеров в Москве.
    Мы предлагаем: срочный ремонт кондиционеров в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. RobertWAisa表示:

    medication from mexico pharmacy mexican pharmacy mexican border pharmacies shipping to usa

  13. Профессиональный сервисный центр по ремонту кондиционеров в Москве.
    Мы предлагаем: ремонт кондиционеров в москве недорого
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  14. 20 Trailblazers Setting The Standard In Door Doctor Window crack repair

  15. Shawnee表示:

    The Most Inspirational Sources Of Car Key Auto Locksmith locksmith car key
    programming (Shawnee)

  16. Профессиональный сервисный центр по ремонту планшетов в том числе Apple iPad.
    Мы предлагаем: мастер по ремонту ipad
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  17. Kathryn表示:

    How You Can Use A Weekly Sectional L Shaped Sectional Project Can Change Your Life cheap l shape sofa (Kathryn)

  18. вызвать проституток mgtimez.ru .

  19. Профессиональный сервисный центр по ремонту кондиционеров в Москве.
    Мы предлагаем: сервисный центр по ремонту кондиционеров
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  20. After the adult doll is completely dry, you can apply a thin layer えろ 人形of renewing powder specifically designed for silicone sex dolls.

  21. Профессиональный сервисный центр по ремонту планшетов в том числе Apple iPad.
    Мы предлагаем: ipad ремонт москва
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  22. Профессиональный сервисный центр по ремонту гироскутеров в Москве.
    Мы предлагаем: сервис по ремонту гироскутеров
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  23. Timothystoft表示:

    best canadian online pharmacy: Online medication home delivery – best canadian pharmacy online

  24. Monroe表示:

    I was curious if you ever considered changing the structure of your site?
    Its very well written; I love what youve got to say. But maybe
    you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having one or
    two images. Maybe you could space it out better?

  25. RogerTut表示:

    best canadian online pharmacy reviews: legal canadian pharmacy online – online canadian pharmacy reviews

  26. Armandoknot表示:

    Прикольные анекдоты. История анекдотов.

  27. Jamesruigo表示:

    http://canadapharma.shop/# legal canadian pharmacy online

  28. Профессиональный сервисный центр по ремонту гироскутеров в Москве.
    Мы предлагаем: сервисный центр гироскутеров в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  29. Профессиональный сервисный центр по ремонту моноблоков в Москве.
    Мы предлагаем: ремонт экрана моноблока
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  30. Профессиональный сервисный центр по ремонту кондиционеров в Москве.
    Мы предлагаем: ремонт кондиционера в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

發佈留言

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