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

73,118 Responses

  1. A male sex doll never says no and will never settle into the same boring position day after day.えろ 人形You have the freedom to dictate any position that takes your fancy.

  2. A male sex doll designed for gay men does represent a えろ 人形financial investment so ensure you don’t store it clothed or wearing accessories,

  3. When you’re just beginning to date, it can be hard to bring up your deepest, えろ 人形hottest, most out there fantasies, desires and tastes. Everyone fears rejection and the

  4. at any time, can only be a good thing when it comes to helping you prepare for truly mind-blowing, えろ 人形long-lasting skin-on-skin contact when the next opportunity or connection presents itself.

  5. but want more in order to grow your えろ 人形confidence.

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

  7. Jeremypag表示:

    buy semaglutide pills semaglutide cost rybelsus price

  8. Originally, I had many SY Doll photos to show, but afterエロ 人形 a lot of thought, I decided not to show them.

  9. The problem of course is that the most important person – you – can become lost えろ 人形in the process with all attention and effort being dispersed to keep other people happy

  10. Below, we explore the factors contributing to the人形エロ increasing popularity of silicone love dolls.

  11. If you haven’t yet come out to your family and circle of friends, えろ 人形trying a high end, ultra-realistic male sex doll is the next best thing to getting it on

  12. The fact is, there’s hardly anything you can’t do with a sex doll えろ 人形that you can with a real life partner.

  13. You may also find that you can’t invite someone back to yourえろ 人形 place because your room mates or friends don’t know that your dating a guy

  14. Sex dolls are open to doing whatever pleases you, and they’re ready when you are.エロ 人形If you have reservations to ask your partner to engage in a sexual act or kinky fantasy you desire,

  15. The impact of touch on wellbeing is something that academics and scientists have been studying for a while – 人形 エロthough it’s pehaps more relevant now than ever before

  16. Here, individuals can autonomously tailor scenarios and details of their 人形エロintimate interactions, fulfilling personalized sexual

  17. Therefore, when you decide to dispose of a used sex doll, エロ 人形be sure to pay attention to local environmental regulations.

  18. 6YE Premium is an established brand known for their realistic dolls.エロ 人形 Their popular Amor series has anatomically-correct vagina placement which many other doll brands lack.

  19. “Touch deprivation is correlated with negative health outcomes such as anxiety,人形 エロ depression, and immune system disorders.”

  20. As the CNY holidays fade into the sunset, things are slowly returning back to normal.えろ 人形 While a bit quiet, there were still plenty of new releases.

  21. BrainCap表示:

    “Секреты долголетия: Как поддерживать мужское здоровье после 40 с помощью Golden Khan”
    Дескрипшен:
    “Узнайте, как сохранить мужскую силу и выносливость после 40 лет. Откройте для себя советы по питанию, физической активности и роли Golden Khan в поддержании здоровья. Начните действовать и наслаждайтесь жизнью на полную катушку!”
    купить golden khan отзывы
    ============================================================================

    Секреты долголетия: Как поддерживать мужское здоровье после 40
    Когда вы переходите за черту 40 лет, жизнь начинает меняться. Это период, когда мы часто задумываемся о своем здоровье, физической форме и общем благополучии. Не паникуйте! Существует множество способов поддерживать мужское здоровье и сохранять силу и выносливость. В этой статье мы раскроем секреты долголетия и рассмотрим, как Golden Khan может стать отличным дополнением к вашему образу жизни.
    Почему важно заботиться о здоровье после 40?
    С возрастом наш организм проходит через множество изменений. Уровень тестостерона может снижаться, а это может влиять на энергию, либидо и общее самочувствие. Однако это не повод для тревоги. С правильным подходом можно не только сохранить здоровье, но и улучшить его! Задумайтесь, как вы себя чувствуете: готовы ли вы к новым вызовам и стремитесь ли вы к активной жизни? Если да, то давайте разберемся, что для этого нужно!
    Здоровое питание: ключ к долголетию
    Одним из основных факторов, влияющих на здоровье мужчин после 40, является питание. Овощи, фрукты, белки и полезные жиры должны стать вашими лучшими друзьями. И не забывайте про водный баланс! Исследования показывают, что правильное питание может снизить риск сердечно-сосудистых заболеваний на 30-40%.
    Продукты, которые стоит включить в рацион:
    Орехи и семена: источник полезных жиров и витаминов.
    Рыба: жирная рыба, такая как лосось, богата омега-3 жирными кислотами.
    Фрукты и овощи: антиоксиданты помогают бороться со старением.
    Цельнозерновые продукты: они улучшают обмен веществ и поддерживают уровень энергии.
    Физическая активность: движение — жизнь
    Регулярные физические нагрузки — это еще один важный аспект. Не думайте, что нужно быть спортсменом. Простая прогулка на свежем воздухе или утренняя зарядка могут творить чудеса. Исследования показывают, что даже 150 минут умеренной активности в неделю могут снизить риск заболеваний и повысить качество жизни.
    Рекомендации по физической активности:
    Силовые тренировки: 2-3 раза в неделю для поддержания мышечной массы.
    Кардио: бег, плавание или велоспорт — отличные способы поддерживать сердце в тонусе.
    Йога или растяжка: помогут улучшить гибкость и снизить стресс.
    Golden Khan: ваш природный помощник
    Здесь вступает в игру Golden Khan. Этот продукт на основе растительных компонентов может стать мощным дополнением к вашему режиму здоровья. Он помогает поддерживать уровень энергии, улучшает обмен веществ и способствует общему укреплению организма. По сути, это натуральный способ поддерживать вашу мужскую силу.
    Как использовать Golden Khan?
    Рекомендуется принимать Golden Khan в соответствии с указаниями на упаковке. Многие мужчины отмечают, что уже через несколько недель регулярного употребления начинают чувствовать разницу в уровне энергии и выносливости.
    Психологическое здоровье: не забывайте о ментальном состоянии
    Нельзя недооценивать влияние психологического здоровья на общее самочувствие. Стресс и тревога могут серьезно сказаться на физическом состоянии. Попробуйте найти хобби, заниматься медитацией или просто проводить больше времени с близкими. Это поможет вам чувствовать себя лучше и поддерживать позитивный настрой.
    Интерактивный элемент: ваше мнение
    Как вы поддерживаете свое здоровье после 40? Поделитесь своими секретами в комментариях! Возможно, ваши советы помогут другим читателям.
    Заключение: время действовать!
    Поддержание мужского здоровья после 40 — это не сложная задача, если вы знаете, как правильно подходить к этому вопросу. Здоровое питание, физическая активность, использование добавок, таких как Golden Khan, и забота о психическом состоянии — это ключевые факторы, которые помогут вам сохранить силу и выносливость на долгие годы.
    Не забывайте: ваше здоровье в ваших руках! Начните действовать уже сегодня и наслаждайтесь каждым моментом жизни.

  22. You’ll Be Unable To Guess Pullout Couches’s Secrets pullout Couches

  23. Ai-Db.Science表示:

    A Look Into The Future What’s The Fireplace Surrounds Industry Look Like In 10 Years?
    Marble Fireplace (Ai-Db.Science)

  24. HaroldBig表示:

    buy ozempic: buy cheap ozempic – buy cheap ozempic

  25. Wonderful blog! I found it while browsing on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?

    I’ve been trying for a while but I never seem to get there!
    Thanks

  26. Elvira表示:

    This post is genuinely a nice one it assists new the web visitors, who are wishing in favor of blogging.

  27. The 10 Most Terrifying Things About Lightweight Automatic Folding Mobility
    Scooters Lightweight Automatic Folding Mobility Scooter (Rees-Houston-2.Blogbright.Net)

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

  29. gocengqq6表示:

    Hmm it seems like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.

    I as well am an aspiring blog blogger but I’m still new to the whole thing.
    Do you have any helpful hints for inexperienced blog writers?

    I’d genuinely appreciate it.

  30. Charlestonia表示:

    Чудеса шиповника: Как простой фрукт поддерживает здоровье мочеполовой системы
    Дескрипшен: Узнайте о чудодейственных свойствах шиповника для поддержки мочеполовой системы. Погрузитесь в научные факты и полезные советы по применению этого мощного натурального ингредиента для укрепления здоровья!
    femovit цена
    ===========================================================================

    Чудеса шиповника: Как этот простой фрукт поддерживает вашу мочеполовую систему
    Здравствуйте, дорогие дачники и огородники! Сегодня мы поговорим о настоящем чуде природы — шиповнике. Знали ли вы, что этот скромный фрукт может сыграть важную роль в поддержании здоровья мочеполовой системы? Давайте погрузимся в научные факты, полезные свойства и способы применения шиповника. Готовы? Тогда начнем!
    Что такое шиповник?
    Шиповник — это плоды кустарника, относящегося к семейству розовых. Он бывает разных видов, но наиболее известен — это шиповник собачий. Эти плоды обычно имеют ярко-оранжевый или красный цвет и напоминают маленькие ягодки. Они не только красивы, но и полны полезных веществ.
    Почему шиповник так важен?
    Шиповник используется в народной медицине на протяжении сотен лет. Он богат витаминами, антиоксидантами и другими биологически активными веществами. По сути, он является источником здоровья. В 100 граммах плодов шиповника содержится до 200% дневной нормы витамина C, а также витамины A, E и K, флавоноиды и органические кислоты. Разве это не впечатляет?
    Полезные свойства шиповника для мочеполовой системы
    Шиповник может оказать огромное влияние на здоровье мочеполовой системы. Рассмотрим основные его полезные свойства.
    1. Поддержка иммунной системы
    Здоровая иммунная система — это первый шаг к предотвращению инфекций. Витамин C, содержащийся в шиповнике, помогает укрепить иммунитет. При регулярном употреблении шиповника, вы можете заметно снизить риск возникновения различных заболеваний, включая инфекции мочевыводящих путей.
    2. Противовоспалительные свойства
    Шиповник обладает мощными противовоспалительными свойствами благодаря своим антиоксидантам. Это особенно важно для женщин, которые могут сталкиваться с воспалениями в мочеполовой системе. Исследования показывают, что экстракты шиповника могут помочь снизить воспаление и улучшить общее состояние.
    3. Улучшение метаболизма
    Шиповник может помочь улучшить обмен веществ, что также положительно сказывается на здоровье мочеполовой системы. В нем содержатся вещества, способствующие выведению токсинов из организма. Это способствует поддержанию нормального функционирования почек и мочевыводящих путей.
    Как применять шиповник?
    Шиповник можно употреблять в различных формах. Вот несколько простых способов:
    1. Чай из шиповника
    Одним из самых популярных способов употребления шиповника является приготовление чая. Для этого вам понадобятся:
    1 столовая ложка сушеных плодов шиповника
    500 мл кипятка
    Заварите шиповник в кипятке и дайте настояться 10-15 минут. Можно добавить мед или лимон для вкуса. Этот чай не только вкусный, но и полезный!
    2. Настойка
    Настойка на водке — еще один способ. Залейте 100 граммов измельченного шиповника 500 мл водки и настаивайте 2-3 недели в темном месте. Принимайте по 20-30 капель перед едой.
    3. Сухие плоды
    Сухие плоды шиповника можно добавлять в каши, йогурты или использовать в выпечке. Это отличный способ обогатить свой рацион витаминами.
    Интерактивный элемент: ваши секреты
    А вы когда-нибудь использовали шиповник в своем рационе? Какие у вас есть рецепты или советы по его применению? Делитесь своими находками в комментариях! Мы все можем извлечь выгоду из опыта друг друга.
    Заключение
    Шиповник — это не просто красивый плод. Он обладает множеством полезных свойств, особенно для здоровья мочеполовой системы. Включив шиповник в свой рацион, вы делаете шаг к более здоровой и активной жизни. Природа предлагает нам настоящие сокровища — не упустите их!
    Так что, давайте вместе поддерживать здоровье с помощью шиповника!

發佈留言

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