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

  1. Its History Of Double Glazed Units Near Me Replacement Double Glazed Units Near Me
    https://Noteswiki.Net

  2. LouisFam表示:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  3. Ten Taboos About Window Repairs Cambridge You Should Never Share On Twitter Emergency upvc door repairs

  4. atavi.com表示:

    Xpert Foundation Repair
    Ríο Grande Valley, TX 78582, United Ѕtates
    9562653062
    how much shouⅼd foundation repair cost (atavi.com)

  5. สวัสดีครับผู้เล่นทุกท่านที่สนใจเกี่ยวกับ เว็บไซต์คาสิโน!

    WM Casino เป็น เว็บไซต์คาสิโนที่มี ความน่าเชื่อถือและได้รับความนิยมจากผู้เล่นมากมายทั่วโลก ทาง WM Casino
    มี เกมคาสิโนหลากหลายประเภท เช่น เกมบาคาร่า,
    เกมรูเล็ต, เกมสล็อต และอื่นๆ ที่จะทำให้คุณสนุกไปกับ ความสนุกและความตื่นเต้นในการเล่นเกมคาสิโนออนไลน์ ไม่ว่าคุณจะเป็น
    มือใหม่หรือมือเก๋าก็สามารถเข้าร่วมสนุกได้ที่นี่ อีกทั้งยังมี โปรโมชั่นและสิทธิพิเศษมากมายที่จะทำให้คุณได้รับ ประสบการณ์ที่ดีที่สุด พร้อมกับระบบการเงินที่มี ความปลอดภัยและระบบการเงินที่รวดเร็ว มาร่วมสนุกกับ WM Casino วันนี้และสนุกไปกับ เกมคาสิโนที่คุณชื่นชอบได้เลยครับ!

    Check out my web page: เครดิตฟรีคาสิโนออนไลน์

  6. Seo Success – How Do You Appraise The Success Of Your Seo Effort 검색엔진최적화 전문가

  7. Отличный сатй! Всем рекомендую!скупка золота

  8. Could Upvc Door Locks Be The Answer To Achieving 2023?
    repairing upvc door

  9. replacing表示:

    A Step-By-Step Guide To Glass Repair Near Me From Beginning To End replacing

  10. Fast Lean Pro表示:

    I couldn’t refrain from commenting. Well written!

  11. broken表示:

    The No. One Question That Everyone Working In Window And Door Repair Near Me Should Be Able To Answer broken

  12. Puravive表示:

    If you want to obtain a great deal from this paragraph then you have to apply these methods to your won blog.

  13. dewascatter表示:

    Ridiculous quest there. What occurred after? Take care!

  14. Rosariotoosy表示:

    The latest analysis, reviews of https://spider-man-ar.com tournaments and the most interesting things from the “Spider-Man” series of games in Azerbaijani language. It’s all here!

  15. Amazing things here. I’m very happy to peer your article.
    Thanks a lot and I’m having a look forward to contact you.
    Will you kindly drop me a e-mail?

  16. maybel.ua表示:

    Так, це варто уваги, актуальна тема,
    яка заслуговує на обговорення.

  17. Hayallerinizdeki kumarhane Sweet bonanza

  18. link bokep表示:

    Nice answers in return of this question with genuine arguments and describing everything on the topic of that.

  19. I’m not sure where you’re getting your info, but good topic.
    I needs to spend some time learning much more or understanding more.
    Thanks for excellent information I was looking for this info for my mission.

  20. The appeal argued that electoral bonds are “completely traceable,” as evidenced by SBI’s secret number-based record of bond buyers
    and the political parties to which they give.

  21. สโบเบ็ตเป็นเว็บพนันที่มีความเป็นที่นิยมอย่างกว้างขวางในทวีปเอเชียและทั่วโลก สโบเบ็ตเปิดให้บริการตั้งแต่ปี พ.ศ.
    2532 และได้รับใบอนุญาตจากรัฐบาลเกาหลีใต้ สโบเบ็ตมีเกมส์คาสิโนที่มากมาย เช่นสล็อตออนไลน์ รูเล็ต แบล็คแจ็ค และอื่นๆ นอกจากนี้ยังมีการเดิมพันพนันกีฬา เดิมพันบอล เดิมพันบาสเกตบอล และพนันกีฬาอื่นๆ อีกมากมาย สโบเบ็ตมีการให้บริการที่ดีและปลอดภัย พร้อมด้วยระบบฝากถอนที่ง่ายและรวดเร็ว หากคุณชื่นชอบการเล่นการพนัน สโบเบ็ตอาจเป็นเว็บไซต์ที่คุณอยากลองเล่นค่ะ

    Here is my website :: เกมคาสิโนออนไลน์ที่ดีที่สุด – https://www.metooo.com

  22. java burn表示:

    I feel this is among the most important info for me. And i am happy reading your
    article. However wanna commentary on few basic things, The site taste is
    perfect, the articles is in point of fact excellent : D.
    Good activity, cheers

  23. puravive表示:

    This design is wicked! You most certainly know how to keep a reader
    amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!)
    Great job. I really enjoyed what you had to say, and more than that,
    how you presented it. Too cool!

  24. H?zl? odeme yapan kumarhane Sweet bonanza

  25. The Most Effective ADHD Medication Adults Uk Tips For Changing Your
    Life Most effective adhd medication

  26. java burn表示:

    Hey there! This is my 1st comment here so I just wanted to give a quick shout out and
    tell you I genuinely enjoy reading your articles.
    Can you suggest any other blogs/websites/forums
    that go over the same topics? Thanks a lot!

  27. Phoebe表示:

    15 Amazing Facts About Malpractice Claim You Didn’t Know malpractice lawsuits – Phoebe,

  28. bokep jepang表示:

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.

    I truly enjoy reading your blog and I look forward to your new updates.

  29. Thanks for sharing such a fastidious opinion, piece of
    writing is nice, thats why i have read it fully

  1. 2024-07-11

    […] кракен онион как зайти vtor run Watch актуальные ссылки даркнет here: […]

發佈留言

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