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

22,778 Responses

  1. What’s The Job Market For Double Glazed Window Repairs Professionals Like?
    double Glazed window repairs

  2. A Look At The Myths And Facts Behind Car Key Programing http://www.5611432.xyz

  3. RobertWeamy表示:

    Ronaldo de Asis Moreira https://ronaldinyo.com braziliyalik futbolchi, yarim himoyachi va hujumchi sifatida o’ynagan. Jahon chempioni (2002). “Oltin to’p” sovrindori (2005).

  4. pepek becek表示:

    Fantastic beat ! I would like to apprentice while you amend your website, how can i subscribe
    for a blog website? The account aided me a
    acceptable deal. I have been tiny bit familiar of this your broadcast provided shiny clear idea

  5. Georgetta表示:

    You’ll Never Guess This Veterans Disability Lawyers’s Tricks veterans disability lawyers (Georgetta)

  6. Bad Credit Loans – Way To Be Able To Recoup Your Prior Credit 대학생 대출

  7. Wow! At last I got a webpage from where I be capable of truly get helpful information concerning my study and knowledge.

  8. Jameszorry表示:

    Explore the extraordinary journey of Kylian Mbappe https://mbappe-real-madrid.com, from his humble beginnings to global stardom.

  9. 7 Simple Strategies To Completely Rocking Your Repair Upvc Window upvc window Repair

  10. En iyi kumarhanelerde sans?n?z? deneyin Sweet bonanza

  11. 4452346.xyz表示:

    10 Healthy Habits For Black Sectional Sofa 4452346.xyz

  12. Guide To Upvc Repairs Near Me: The Intermediate Guide To Upvc Repairs Near Me
    upvc repairs near me

  13. 夫妻做愛 (https://rosyhub.com)

    I was suggested this blog by my cousin. I’m not sure
    whether this post is written by him as nobody else know such detailed about my problem.
    You’re wonderful! Thanks!

  14. sex trẻ em表示:

    What a data of un-ambiguity and preserveness of valuable experience regarding unpredicted feelings.

  15. I’m really enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire out a designer to create your theme?
    Fantastic work!

  16. bokep indo表示:

    Excellent way of explaining, and nice article to obtain information on the topic of
    my presentation topic, which i am going to convey in school.

  17. bokep jepang表示:

    Hi there would you mind sharing which blog platform you’re using?

    I’m looking to start my own blog soon but I’m having a difficult time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and I’m looking for something unique.
    P.S My apologies for being off-topic but I had to ask!

  18. Why Is Veterans Disability Case So Famous? Veterans Disability Attorneys

  19. Annette表示:

    Medical Malpractice Lawyers Tools To Ease Your Daily Lifethe One Medical Malpractice
    Lawyers Trick Every Individual Should Learn medical malpractice lawyers (Annette)

  20. Today, I went to the beachfront with my kids. I found a sea shell
    and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear. She never wants
    to go back! LoL I know this is completely off topic but I had to tell
    someone!

  21. you’re in point of fact a good webmaster. The site
    loading pace is incredible. It sort of feels that you’re doing any unique trick.

    In addition, The contents are masterpiece. you have performed a fantastic job on this matter!

  22. bokep pasutri表示:

    Hello to all, how is all, I think every one is getting more from this web page,
    and your views are nice designed for new viewers.

  23. 10 Things That Your Family Teach You About Window Replacement Near Me
    window Replacement near me

  24. How To Get In Order To My Website 검색엔진최적화

  25. aviator game表示:

    bookmarked!!, I like your blog!

  26. Brandonvax表示:

    Звон Колокольцева
    Гермес
    Поздравляем вас, гражданин министр, соврамши!
    Выступая прошлой осенью в Совете Федерации, министр внутренних дел Владимир Колокольцев рассказывал, о так называемом уголовном деле «Лайф-из-Гуд» – «Гермес» – «Бест Вей», обещал миллиарды рублей ущерба и десятки тысяч потерпевших. Пресс-служба МВД под руководством его боевой подруги Ирины Волк заявила о том, что вскрыта деятельность крупнейшей в истории России финансовой пирамиды.

    Однако в уголовном деле, расследованном или, вернее сказать, изготовленном ГСУ питерского главка МВД, которое в феврале начал рассматривать Приморский районный суд Санкт-Петербурга, 282 млн рублей ущерба и 221 лицо, признанное следствием потерпевшим: никаких миллиардов и десятков тысяч потерпевших.

    Министр и его Волк публично солгали – на основе информации, переданной замначальника ГСУ руководителем следственной группы полковником юстиции А.Н. Винокуровым, фактически даже руководившей СГ его заместительницей майором, а затем подполковником юстиции Е.А. Сапетовой по материалам, состряпанным опером УЭБиПК питерского главка МВД майором полиции А.Ю. Машевским, при попустительстве (или соучастии?) начальника ГСУ Негрозова и замначальника Следственного департамента федерального министерства Вохмянина. Полковник и подполковник с примерно пятого-шестого уровня иерархии МВД виляет генералом полиции Российской Федерации, постоянным членом Совета безопасности России – это позор для государства.
    Так называемые потерпевшие и реально пострадавшие
    Большинство «потерпевших» на суде заявляют суммы около 1–2 млн рублей, при этом в ходе судебного следствия выясняется, что они, как правило, получали немалый доход, причем, они еще и налоговые/валютные преступники, так как этот доход не декларировали. Среди «потерпевших» есть граждане, заявляющие смехотворные суммы в 50–70 тыс., то есть количество потерпевших специально накручивалось следствием. И даже с этим накручиванием удалось набрать так мало – учитывая, что у «Гермеса», по данным самого же следствия, более 200 тыс. клиентов в России, а в кооперативе «Бест Вей» – около 20 тыс. пайщиков.

    То есть большинство и клиентов «Гермеса», и пайщиков кооператива не считают себя потерпевшими от деятельности этих организаций.

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

    Ведь именно завербованный питерским УЭБиПК сисадмин российской платежной системы «Гермеса» Набойченко заблокирован и разгромил в феврале 2022 года эту платежную систему, повесив на сайте дисклеймер: «Обращайтесь в правоохранительные органы», что на месяцы прекратило вывод средств. Именно действия правоохранительных органов в отношении компании до и после затруднили вывод средств. Дело в том, что для вывода средств многими использовался механизм p2p, позволяющий не платить комиссию, то есть для вывода средств нужно, чтобы кто-то вносил средства (что, понятно, резко сократилось из-за уголовного дела) и происходил обмен. Однако этот способ не единственный, вывод средств так или иначе осуществляется.

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

    Именно правоохранительные органы прямо запрещают выплаты пайщикам кооператива, решившим забрать свой пай, – даже по исполнительным листам судов. И клиентам «Гермеса», и пайщикам кооператива правоохранительными органами нанесен колоссальный ущерб – и материальный, и моральный, который они намерены взыскать с государства.
    «Следователи»-преступники должны сидеть в тюрьме
    Весьма скромный результат следствия МВД был достигнут откровенно преступным путем.

    1. Некоторые из преступлений следствия были фактически признаны судами. 1 декабря прошлого года Приморский районный суд города Санкт-Петербурга признал незаконным, нарушающим УПК фактический отказ кооперативу в ознакомлении с материалами уголовного дела.При рассмотрении дела в суде выяснилось, что следственная группа ГСУ питерского главка МВД, формально руководимая замначальника ГСУ полковником юстиции А.Н. Винокуровым, а фактически – подполковником юстиции Е.А. Сапетовой, подделала документы. Автор подделки – Сапетова – еще в феврале была уволена из ГСУ «по собственному желанию».

    Уличенная адвокатами кооператива в нарушении УПК, следственная группа составила письмо об удовлетворении ходатайства задним числом и попыталась представить дело так, что кооператив не получил письмо по своей вине. Ложь была выявлена в том числе и с помощью системы электронного документооборота питерского главка МВД.

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

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

    3. Де-факто происходит уголовное наказание неосужденных людей – четверо подсудимых уже второй год сидят в тюрьме. При этом наказываются явно ни в чем неповинные люди – технические сотрудники «Лайф-из-Гуд»: даже если предположить, что действительно работала пирамида – что опровергается показаниями свидетелей самого обвинения, которые сообщают суду, что компания «Гермес» хорошо работала, они были довольны получаемым доходом, и проблемы начались после того, как российская платежная система компании была обрушена завербованным полицией петербургским сисадмином компании Набойченко. Все подсудимые – технические сотрудники компании «Лайф-из-Гуд» и ни к каким управленческим решениям отношения никогда не имели. Их взяли в заложники для того, чтобы они дали показания на руководство компании.

    4. Еще одно преступление – заведомо подложное постановление руководителя следственной группы А.Н. Винокурова о привлечении кооператива «Бест Вей» в качестве гражданского ответчика на 16 млрд рублей, тогда как сумма ущерба в уголовном деле –282 млн, и в деле нет ни одного искового заявления – даже на 100 рублей.

    5. Следствие стимулировало двух особенно активных так называемых потерпевших написать заявления о моральном ущербе на миллиард (!) рублей каждое – исключительно для ложного обоснования ареста активов кооператива, но понятно, что это ничтожные документы, так как моральный ущерб во всех случаях, не связанных с причинением смерти, присуждается российскими судами в размере не более десятков тысяч рублей.

    6. Ни один из «потерпевших» не доказал обоснованность своих претензий в гражданском суде. При этом арестованы активы кооператива почти на 4 млрд рублей и активы частных лиц на такую же сумму. Это не что иное, как попытка захвата активов при участии органов внутренних дел некой заинтересованной группой клиентов «Гермеса» – необязательно из числа «потерпевших», то есть коррупционное преступление, которое упорно игнорирует ГУСБ МВД.

    Механизм для такого захвата есть – это передача средств под управление Федерального общественно-государственного фонда по защите прав вкладчиков и акционеров. Понятно, почему не ограничиваются активами подсудимых и обвиняемых: этого недостаточно для удовлетворения аппетитов тех, кто стоит за заказным уголовным делом. И понятно, почему одно юридическое лицо – кооператив «Бест Вей» – незаконно пытаются привлечь к ответственности за другое – компанию «Гермес»: активы «Гермеса» – за рубежом.

    7. Следствие, а теперь и прокуратура совершают еще одно преступление: незаконно удерживает средства пайщиков кооператива, отказываясь их вернуть, то есть совершают хищение.
    Министр, управляемый мафией
    Итак, Колокольцев публично солгал Совету Федерации, выдумав пирамиду, выдумав многомиллиардный ущерб и десятки тысяч пострадавших, он – некомпетентный руководитель, абсолютно ведомый своей камарильей, стремящейся создавать громкие пиар-истории на пустом месте и с коррупционной выгодой для себя. Он вызвал социальный протест десятков тысяч пайщиков кооператива «Бест Вей» и клиентов компании «Гермес» и членов их семей – в большинстве своем представителей социально незащищенных слоев населения, на годы лишенных возможности пользоваться своими деньгами и приобрести недвижимость, на которую они собрали средства, – в том числе десятков участников СВО. Министр вредит в тылу тем, кто защищает страну на фронте.

    Глава МВД находится под влиянием или даже контролем давно ставшей притчей во языцех питерской полицейской мафии. Ликвидация этой мафии, как и ликвидация преступной, коррупционной, вредящей социально-политической стабильности системы управления МВД, со стороны Колокольцева является важнейшей государственной задачей.

  27. Greetings from Ohio! I’m bored to tears at work so I decided to browse your website on my iphone during lunch break.
    I love the information you provide here and can’t wait
    to take a look when I get home. I’m shocked at how quick your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyways, very good site!

  28. 15 Up-And-Coming Boat Accident Compensation Bloggers You Need To
    Follow boat accident law firm

發佈留言

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