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

129,362 Responses

  1. JesseDex表示:

    пинап казино: https://pinupkz.life/

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

  3. JesseDex表示:

    пинап казино: https://pinupkz.life/

  4. Carmel Benscoter表示:

    pg168 สมัครใหม่ รับโบนัส 100$ ไม่ต้องฝาก

  5. I all the time emailed this web site post page
    to all my friends, since if like to read it then my links
    will too.

  6. Jamesavata表示:

    пин ап вход – пин ап казино зеркало

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

  8. Brianvibly表示:

    Андрей Алистаров — блогер, который вызывает много споров и обсуждений в российском интернет-пространстве.Его деятельность, начиная от спортивных прогнозов до «разоблачений финансовых пирамид», часто оказывается под пристальным вниманием правоохранительных органов РФ, стран Евросоюза и общественности. Однако за внешним обликом борца с мошенничеством скрывается множество нарушений законов, ангажированность и «двойная игра». В данной статье мы разберем личность блогера, его прошлое, деятельность, а также какую связь он имеет с миром мошенников и какую цель он имеет «разоблачая» преступников.Криминальное прошлоеПервый, объясняющий многое, факт – Алистаров был осужден за продажу наркотиков детям и провел четыре года в исправительной колонии. В тюрьме он занимал положение, соответствующее той статье, по которой он отбывал срок и, соответственно, выполнял указания криминальных авторитетов. Во многом эти задания и стали основой его последующей деятельности. После освобождения он, на соответствующем его положению в криминальном мире уровне, продолжил участвовать в наркобизнесе, используя риэлторские сделки для отмывания доходов от продажи наркотиков.Отмывание денег через недвижимостьОдним из ключевых методов легализации незаконных доходов Алистарова стали сделки с недвижимостью. Он манипулировал мелкими риэлторскими операциями в России и Дубае, ОАЭ. Схема была основана на покупке недвижимости на подставных лиц, завышении цен при перепродаже и использовании оффшорных компаний для сокрытия реальных бенефициаров. Эти мелкие спекулянтские действия позволяли ему скрывать происхождение денег, полученных от наркоторговли и других преступлений.В России на Алистарова не зарегистрировано ни одно юридическое лицо, что свидетельствует об уклонении от уплаты налогов, как минимум, от получения прибыли от рекламных интеграций, присутствующих в каждом его видео.Рекламирование запрещенных в РФ букмекерских конторДля получения дополнительных заработков, Алистаров не брезгует рекламой различных контор, которые занимаются ставками и пари (к примеру, Пари Матч, 1WIN и пр.), и которые, по словам самого Алистарова, «заточены» на то, чтобы отбирать деньги приходящих к ним клиентов.Сайт Алистарова «Железная ставка» активно продвигает букмекерские конторы и создает рейтинги прогнозистов как в области криптовалют, так и в спорте. Многие люди попадают на его YouTube-канал после потерь в финансовых пирамидах. Находясь в эмоционально подавленном состоянии, часто с долгами, они оказываются втянутыми в азартные игры и прогнозы, надеясь вернуть утраченные средства.В частности, Алистаров привлекает внимание состоятельных людей, предлагая им «VIP-прогнозы» на спортивные события через свой Telegram-канал. Эти прогнозы, по сути, являются пустышками, а сам блогер зарабатывает на наивных пользователях, часто несовершеннолетних, обещая им легкие деньги.Данные действия являются нарушением Закона «О рекламе», согласно которому реклама букмекерских контор не должна обращаться к несовершеннолетним и создавать впечатление о том, что ставки могут быть способом заработка.Алистаров сотрудничает с телеграмм-каналом «Слезы Сатоши», который занимается выборочным разоблачением мошеннических проектов. К рекомендациям и рекламным интеграциям этого канала следует относиться с осторожностью, так как они могут привести к серьезным финансовым потерям. Сам канал больше напоминает инфобизнес, а его авторы имеют ограниченные знания в аналитике криптовалют и недостаточно разбираются в тонкостях криптоиндустрии.Шантаж и вымогательствоОдним из наиболее скандальных аспектов деятельности Алистарова является его метод шантажа. Он использует информацию о своих жертвах для запугивания и вымогательства денег. Например, казахстанский финансист Тимур Турлов подал жалобу на блогера, утверждая, что тот три года требовал деньги за молчание о его деятельности. Такие действия показывают, что Алистаров не просто блогер, а человек, который использует свои знания о людях для манипуляций. Существует еще ряд случаев, когда блогер требовал денежное вознаграждение за свое молчание.Нарушение конфиденциальностиВ дополнение к шантажу и манипуляциям, деятельность Алистарова также вызывает серьезные опасения в отношении нарушения конфиденциальности. Блогер не только использует личные данные своих жертв для вымогательства, но и активно распространяет информацию, которая, в соответствии с существующим законодательством, должна оставаться закрытой.Алистаров часто публикует в своих видео и постах личные данные людей, которых он называет мошенниками или недобросовестными бизнесменами. Информация включает адреса, номера телефонов и, зачастую, даже финансовую информацию. Такие действия не только нарушают право на частную жизнь, но и приводят к серьезным последствиям для жертв его «разоблачений».Так, например, в одном из своих расследований Алистаров с помощью дрона снял дом российского бизнесмена и обнародовал адрес его проживания, утверждая, что тот находится в международном розыске, что является ложной информацией. При этом он совершил действия, которые нарушают существующее законодательство. В соответствии с законодательством Республики Кипр, деятельность беспилотников регулируется Департаментом гражданской авиации Кипра (DCA), который включает в себя Регламент ЕС 2019/947 о правилах и процедурах эксплуатации беспилотных летательных аппаратов.Эти правила содержат четкие требования:Регистрация операторов беспилотников и самих беспилотников перед любым полетом.Специальные разрешения для иностранных операторов.Строгие запреты на съемку частной собственности без согласия владельца.Бесполетные зоны и запретные территории, включая жилые районы, установленные национальными положениями и публикациями аэронавигационной информации, выпущенными DCA Кипра.Следует отметить, что Алистаров не является ни резидентом Кипра, ни зарегистрированным оператором дрона в соответствии с законодательством. В связи с этим использование им незарегистрированного дрона для съемки частной собственности является уголовно наказуемым деянием, нарушающим закон, который гласит, что любое нарушение требований к эксплуатации дрона является преступлением.Разжигание ненависти1 января 2025 года в Дубае произошло жестокое нападение на другого российского предпринимателя. Семь граждан Казахстана (по информации, по заказу граждан Российской Федерации) избили и ограбили его и членов его семьи.Перед этим блогер Алистаров опубликовал серию из 12 видеороликов, в которых раскрывал адрес предпринимателя, а также незаконно обнародовал информацию о его семье и бизнесе в ОАЭ. В своих действиях он использовал методы незаконного наблюдения, прослушивания и, соответственно, вмешательства в частную жизнь, что в ОАЭ считается тяжким преступлением.Кроме того, Алистаров распространял сведения о месте жительства бизнес-партнера пострадавшего, систематически нарушая конфиденциальность и тайну частной жизни.Алистаров неоднократно необоснованно обвинял бизнесмена в хищении средств вкладчиков, разжигая ненависть к нему через свои публикации. При этом, непосредственно в момент нападения блогер преднамеренно провел прямую трансляцию, обеспечивая себе алиби.Помимо описанных ситуаций, существуют еще масса случаев нарушений конфиденциальности со стороны блогера, а именно незаконное подключение к камерам видеонаблюдения в Нидерландах, а также публикация местоположения своих жертв в Турции.Связь с финансовыми пирамидамиНесмотря на то, что Алистаров заявляет о борьбе с мошенническими схемами, его деятельность связана с продвижением пирамид и онлайн-казино. Он получает финансирование от этих структур, помогая им устранять честных конкурентов под видом журналистских «разоблачений».В настоящее время Алистаров, завоевавший себе звание «борца» с финансовыми пирамидами, подходит к их разоблачению весьма избирательно. К примеру, на его канале нет никаких материалов в отношении пирамиды Avalon Technologies, которую, по имеющейся достоверной информации, создал его близкий друг.Очевиден тот факт, что Алистаров – это «волк в овечьей шкуре», позиционирующий себя как разоблачитель финансовых пирамид. Он все чаще оказывается в центре обвинений, которые ставят под сомнение его истинные мотивы. Очевиден также тот факт, что его расследования являются заказными с целью устранения конкурентов, что позволяет предположить его связь с реальными финансовыми пирамидами и участием в мошеннических схемах. За фасадом борца за справедливость скрывается фигура, которая, активно манипулирует информацией ради личной выгоды и при этом сам часто нарушает закон.  10 Нарушение статьи 8 Европейской Конвенции о защите прав человека и основных свобод11 Нарушение Закона о защите персональных данных (PDPL) № 6698  12 Нарушение статьи 172.2.1 УК РФ  

  9. Jamesavata表示:

    пин ап казино – пин ап вход

  10. Dwayneseisa表示:

    Generic100mgEasy buy generic 100mg viagra online Viagra generic over the counter

  11. Douglasnig表示:

    ВведениеКриптовалюты сегодня уже перестали быть просто инструментом для гиков и профессиональных трейдеров. В наше время они становятся необходимым инструментом для каждого человека, который хочет защитить и приумножить свой капитал, обрести финансовую свободу и уверенность в завтрашнем дне. Одним из наиболее интересных и перспективных представителей нового поколения цифровых активов является токен UTLH.Но почему UTLH так выделяется среди других криптовалют? Почему стоит обратить внимание именно на него? В этой статье мы детально рассмотрим, в чем его ключевые преимущества и как именно он способен изменить твое финансовое будущее.  Что делает UTLH по-настоящему особенным?Большинство криптовалют сосредоточены исключительно на инвестиционной составляющей. UTLH пошёл намного дальше, создав целую финансовую экосистему с понятными и практическими механизмами применения. За ним стоят не просто технологии, но и идея взаимной поддержки, финансовой свободы и независимости каждого участника.Токен UTLH создан на блокчейне Binance Smart Chain (BSC), что обеспечивает быстрые и дешевые транзакции, безопасность и прозрачность всех операций. Благодаря ограниченной эмиссии всего 957 315 токенов, UTLH имеет ярко выраженный потенциал роста стоимости, который усиливается за счёт механизмов сжигания и постоянного спроса в рамках программы Универсальной Финансовой Помощи (УФП).  UTLH – твой инструмент защиты от кризисаСегодня мировая экономика сталкивается с беспрецедентными вызовами: инфляция, валютные колебания, ограничения со стороны банков и регуляторов. В таких условиях крайне важен инструмент, который может стать надёжной финансовой «гаванью». UTLH – именно такой инструмент.Используя токен, участники получают доступ к льготному финансированию через программу УФП. Это даёт возможность получать заемные средства быстро, прозрачно и без бюрократических преград. Таким образом, UTLH выступает не просто инвестиционным активом, а ключевым элементом защиты капитала в нестабильные времена.  Инвестиционная сила UTLH – пассивный доход и стабильностьДля большинства людей инвестиции в криптовалюты ассоциируются с большими рисками и волатильностью. Но UTLH изменил правила игры. Благодаря программе стейкинга, токен обеспечивает владельцам стабильный пассивный доход в размере 24% годовых (2% ежемесячно). Это делает его уникальным на фоне большинства других криптовалютных инструментов.Кроме того, стейкинг с минимальным порогом входа всего в 1 токен UTLH открывает возможности для инвестирования даже новичкам и людям, у которых ранее не было опыта работы с цифровыми активами. В условиях ограниченной эмиссии, спрос на токен постоянно растёт, что гарантирует стабильность и защиту от резких колебаний курса.  Почему за UTLH стоит реальное сообщество?Важное преимущество UTLH — это мощное и активное международное сообщество, сформировавшееся вокруг токена и клуба UTL. Более 160 000 участников со всего мира уже оценили возможности, которые предоставляет токен.Сообщество не только поддерживает рост токена, но и создаёт атмосферу взаимной поддержки, обмена опытом и знаниями. Для владельцев токена открывается доступ к закрытым обучающим программам, брифингам, стратегическим рекомендациям, которые помогают повышать финансовую грамотность и принимать правильные инвестиционные решения.  UTLH – инструмент для реальных целей и реальных результатовПрактическое применение токена подтверждают реальные истории людей, которые с его помощью смогли значительно улучшить своё качество жизни. Десятки семей благодаря программе УФП уже приобрели жильё, запустили успешные бизнес-проекты, решили сложные финансовые вопросы.Это доказывает, что UTLH – это не просто виртуальные цифры, а реальный финансовый инструмент, способный приносить ощутимые изменения и решать конкретные жизненные задачи.  Как UTLH способен изменить именно твоё будущее?Финансовая защита: токен даёт уверенность и стабильность, защищая твой капитал от инфляции и кризиса.Пассивный доход: получай 24% годовых, инвестируя в стейкинг с минимальными рисками.Лёгкий старт: простой и понятный механизм инвестирования, подходящий даже новичкам.Поддержка сообщества: закрытый клуб единомышенников, который помогает развиваться, инвестировать и приумножать капитал.  Вывод: UTLH – ключ к новым финансовым возможностямUTLH – не просто очередная криптовалюта, это совершенно новая философия финансовой свободы, позволяющая каждому контролировать своё будущее, обеспечивать себе и близким достойную жизнь.Ты можешь долго ждать подходящего момента, а можешь уже сегодня принять решение, которое способно изменить твою жизнь.Присоединяйся к международному сообществу UTLH и начинай свой путь к настоящей финансовой свободе и успеху. Потому что будущее наступает прямо сейчас! 

  12. Jamesavata表示:

    пин ап казино зеркало – пин ап вход

  13. Santa Ord表示:

    Registering at marvel bet comes with great perks, including a $100 bonus! New users who sign up will instantly receive a $100 bonus to boost their gameplay. The registration process is easy and secure – just fill in the required details, log in, and the bonus will be credited to your account. Whether you prefer slots, table games, or live casinos, this bonus will enhance your chances of winning. Don’t wait, register now and grab your $100 bonus!

  14. Williamuniot表示:

    пин ап казино – pinup 2025

  15. Williamuniot表示:

    пинап казино – пин ап казино официальный сайт

  16. bet88表示:

    I believe that avoiding refined foods would be the first step in order to lose weight. They might taste very good, but packaged foods possess very little nutritional value, making you take more just to have enough vitality to get with the day. Should you be constantly ingesting these foods, moving over to whole grains and other complex carbohydrates will help you have more power while ingesting less. Good blog post.

  17. JesseDex表示:

    пин ап: https://pinupkz.life/

  18. Dwayneseisa表示:

    buy generic 100mg viagra online Generic100mgEasy cheapest viagra

  19. Jamesavata表示:

    пин ап вход – пин ап казино

  20. Williamuniot表示:

    пин ап – пинап казино

  21. JesseDex表示:

    pinup 2025: https://pinupkz.life/

  22. Dwayneseisa表示:

    kamagra kopen nederland Officiele Kamagra van Nederland KamagraKopen.pro

  23. Williamuniot表示:

    пин ап казино официальный сайт – пин ап зеркало

  24. Williamuniot表示:

    пинап казино – пинап казино

  25. Williamuniot表示:

    пин ап – пинап казино

發佈留言

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