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

  1. and don’t store in an awkward position.えろ 人形Hang up if you can and keep covered to remove dust or stains.

  2. When asked if it was anatomically correct,エロ 人形 he realized there was a demand for a female sex doll that served a real function.

  3. They simply use too much AI.. but were interesting to look at (from an analytical perspective).エロ 人形

  4. In conclusion, caring the wig of a sex doll and requires 人形エロcare and patience. Through regular cleaning, attention to storage environment, regular combing, and timely replacement of damaged wigs

  5. Additionally, they’re highly-praised by the doll community, エロ 人形including The Doll For

  6. lovedoll表示:

    I insisted on purchasing brand sex dolls for my stores and when I clicked the エロ 人形GSDoll website,

  7. 人形 エロ表示:

    Her observations confirmed that casual touch is 人形 エロlacking in our day-to-day habits.

  8. エロ 人形表示:

    and gently blot excess water with a clean towel,人形エロ avoiding twisting the wig forcefully.

  9. We’d argue that for many people, sexual release is just as important to mental wellbeing,えろ 人形reducing stress levels and overall wellbeing as touch.

  10. Chiminea Indoor Tools To Help You Manage Your
    Everyday Lifethe Only Chiminea Indoor Trick That Every Person Should Learn Chiminea Indoor

  11. 中国 爆乳表示:

    um and SexDolls subreddit. With arguably the best customer エロ 人形service out there and large collection of sex dolls, you can’t go wrong with any of them

  12. Сервисный центр предлагает выездной ремонт духовых шкафов fagor срочный ремонт духовых шкафов fagor

  13. WM’s “Bimbo Doll” is officially out, Angel Kiss, SE Doll,エロ 人形 and Irontech shared many new photos, and “cute” brands (like Shedoll and Fudoll) released adorable Asian heads.

  14. If you’re looking for companionship from your doll,えろ 人形you might enjoy the process of dressing your doll,

  15. lovedoll表示:

    is almost ready for release, some pretty smiling heads, and a new method of oral cavity cleaning? エロ 人形Without further ado, let’s see what Spring has to bring.

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

  17. As the owner of a sex doll brothel, I’ve had the opportunity to purchase 10+ sex dollsエロ 人形 from various vendors and brands. When it comes to finding the perfect product,

  18. Pay close attention to areas that may have come into contact えろ 人形with bodily fluids, such as the breasts and genital region.

  19. Jeremymes表示:

    Sea robins are fish with ‘the wings of a bird and multiple legs like a crab’
    kra10 cc
    Some types of sea robins, a peculiar bottom-dwelling ocean fish, use taste bud-covered legs to sense and dig up prey along the seafloor, according to new research.

    Sea robins are so adept at rooting out prey as they walk along the ocean floor on their six leglike appendages that other fish follow them around in the hope of snagging some freshly uncovered prey themselves, said the authors of two new studies published Thursday in the journal Current Biology.

    David Kingsley, coauthor of both studies, first came across the fish in the summer of 2016 after giving a seminar at the Marine Biological Laboratory in Woods Hole, Massachusetts. Kingsley is the Rudy J. and Daphne Donohue Munzer Professor in the department of developmental biology at Stanford University’s School of Medicine.

    Before leaving to catch a flight, Kingsley stopped at a small public aquarium, where he spied sea robins and their delicate fins, which resemble the feathery wings of a bird, as well as leglike appendages.

    “The sea robins on display completely spun my head around because they had the body of a fish, the wings of a bird, and multiple legs like a crab,” Kingsley said in an email.
    “I’d never seen a fish that looked like it was made of body parts from many different types of animals.”
    Kingsley and his colleagues decided to study sea robins in a lab setting, uncovering a wealth of surprises, including the differences between sea robin species and the genetics responsible for their unusual traits, such as leglike fins that have evolved so that they largely function as sensory organs.

    The findings of the study team’s new research show how evolution leads to complex adaptations in specific environments, such as the ability of sea robins to be able to “taste” prey using their quickly scurrying and highly sensitive appendages.

  20. without physically being in the presence of another human (which is very handy えろ 人形as we navigate a future that could include new strains of the COVID

  21. Adhd testing表示:

    5 Killer Quora Answers To Adult ADHD Testing Adhd testing

  22. WM Doll is the most popular sex doll brand in the world, エロ 人形and for good reason. Known for their high quality material and attractive model-like heads,

  23. That could be something you yourself are grappling with right now in factえろ 人形.

  24. lovedoll表示:

    Additionally, they’re highly-praised by the doll community, エロ 人形including The Doll For

  25. This gives you complete freedom to have as much sex as you want, えろ 人形with no worries of being seen or having to explain before you feel comfortable sharing your journey with others.

  26. Cleaning the penis is straightforward: warm water is sufficient,人形エロ and uncircumcised individuals need to retract the foreskin for proper cleaning.

  27. KeithMup表示:

    7 simple secrets to eating the Mediterranean way
    кракен даркнет
    What if “diet” wasn’t a dirty word?

    During Suzy Karadsheh’s childhood in Port Said, Egypt, diet culture was nonexistent.

    “My parents emphasized joy at the table, rather than anything else,” Karadsheh said. “I grew up with Mediterranean lifestyle principles that celebrate eating with the seasons, eating mostly whole foods and above all else, sharing.”

    But when Karadsheh moved to the United States at age 16, she witnessed people doing detoxes or restricting certain food groups or ingredients. Surrounded by that narrative and an abundance of new foods in her college dining hall, she says she “gained the freshman 31 instead of the freshman 15.” When she returned home to Egypt that summer, “I eased back into eating the Mediterranean food that I grew up with. During the span of about two months, I shed all of that weight without thinking I was ever on a diet.”
    To help invite joy back to the table for others — and to keep her family’s culinary heritage alive for her two daughters (now 14 and 22) — Atlanta-based Karadsheh launched The Mediterranean Dish food blog 10 years ago. Quickly, her table started getting filled with more than just her friends and family.

    “I started receiving emails from folks whose doctors had prescribed the Mediterranean diet and were seeking approachable recipes,” Karadsheh said. The plant-based eating lifestyle, often rated the world’s best diet, can reduce the risk for diabetes, high cholesterol, dementia, memory loss and depression, according to research. What’s more, the meal plan has been linked to stronger bones, a healthier heart and longer life.

    Preparing meals the Mediterranean way, according to Karadsheh, can help you “eat well and live joyfully. To us, ‘diet’ doesn’t mean a list of ‘eat this’ and ‘don’t eat that.’” Instead of omission, Karadsheh focuses on abundance, asking herself, “what can I add to my life through this way of living? More whole foods, vegetables, grains, legumes? Naturally, when you add these good-for-you ingredients, you eat less of what’s not as health-promoting,” she told CNN.

  28. to find out exactly what is most pleasing to youえろ 人形.

  29. Different materials require specific cleaning methods. 人形エロFor instance, TPE sex dolls and silicone sex dolls necessitate different cleaning approaches.

  30. 人形 エロ表示:

    I insisted on purchasing brand sex dolls for my stores and when I clicked the エロ 人形GSDoll website,

發佈留言

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