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

46,780 Responses

  1. Everything about her was tall and full, from her riding boots to her cascading brown hair. 女性 用 ラブドールShe trained real horses, she explained

  2. Sans?n?z guvenilir bir kumarhanede Sweet bonanza

  3. 人形 エロ表示:

    We started rubbing our precum on each others cocks, we laid down and began stroking. セックス ロボットI had never done anything with a guy before, so I was pretty nervous by this time.

  4. I consider stand-up paddle boarding but that seems like a huge effort,ラブドール オナニー so I embark on my other goals for the trip: reading for hours without interruption or responsibility

  5. He put the condom on, and I was on top. オナドールForeplay was really important because it made it easier for him to slide in me without blood being involved.

  6. She calls external stimulation “outercourse,” jydollsaying that grinding, humping, and similar activities allow people to “experience orgasm just by touching and kissing and being intimate,

  7. えろ 人形表示:

    and the second is lube. This is especially helpful for anal sex.ロボット セックス Penetration is more likely to hurt if you’re feeling tense about it too. Making sure you’ve thought about whether you’re actually ready for sex with your partner can help.

  8. えろ 人形表示:

    not having as high a sex drive as they are expected to ‘or they’ve watched porn and compare their penises’.ラブドール 女性 用 In a GQ survey, 54 of men said that watching porn made them feel self-conscious.

  9. Could I be sending a message of ‘oh, poor men, just cuddle them more and it will be okay’?ラブドール 女性 用 It’s not our job to fix them. But, that’s not what I (or any of the experts I spoke to) mean.

  10. えろ 人形表示:

    As we hit the bases, we somehow ended up with both our clothes on the floor and I gave him a blow-job. オナドールIt wasn’t the first time, but at this point, I knew that I was tired of just doing that.

  11. 人形 エロ表示:

    the beer, or a combination, but I remember I was pretty horny. セックス ロボットI woke up and had to pee, when I got back to the tent my friend appeared to be asleep

  12. えろ 人形表示:

    others felt there wasn’t enough representation and that they couldn’t explore their 女性 用 ラブドールattractions without being incorrectly labelled as ‘gay’

  13. I’m so completely happy that this series is over and that I will
    never decide up any of those books from this sequence once more for as long as I dwell.
    I am the definition of completed. Also, spoilers will probably be abound
    and aplenty throughout this entire assessment, and this goes to
    a a mostly Supernatural gif-crammed extravaganza, as a
    result of A). That’s how angels/demons/and so on. should
    be accomplished and B). I can. So if you don’t
    like spoilers or Supernatural, depart now, as a result of shit’s about to get ugly up in here

  14. Plus, one should always be stimulated and properly lubricated before using any toy.ラブドール sex Howard points out that vibrators won’t feel good if the user isn’t already aroused, and explains,

  15. still holds a strong influence over how individuals feel they can express女性 用 ラブドール themselves.

  16. えろ 人形表示:

    My partner likes the Tenga egg,’ shrugs another. Others? They’re not so sure. ‘Just.ラブドール 女性 用 creepy, sorry,’ is the consensus, along with, ‘They don’t need them, we do.’ It’s a valid point, or… is it?

  17. エロ 人形表示:

    He’d stick his fingers in my mouth and I’d bite them オナドール(mostly because we have wild sex at his parents’ home and I’m being too loud

  18. エロ 人形表示:

    When it comes to enjoying the moment-by-moment in sex, they don’t have any real guidance on that.’ラブドール 女性 用 This could mean that many men subconsciousl

  19. エロ 人形表示:

    The couple tells me some things. ラブドール オナニーThey met while in a threesome—he was dating her friend and she stole him away but all three people are cool now!

  20. 人形 エロ表示:

    Even without orgasm, I’ve enjoyed all my sexual encounters. セックス ロボットThat first-time is still some of the best sex I’ve ever had.

  21. After a morning spent reading and snoozing and reading and snoozing, ラブドール オナニーI realize that some of the other women here have even better ideas—I observe two separate women receiving cunnilingus.

  22. エロ 人形表示:

    I almost passed out once when my bf was eating me out. オナドールThe most intense was definitely when he ate my butthole, it wasn’t the first time but he was just very skilled and I just had to make him stop,

  23. I laughed. I thought he was joking.セックス ロボット Turns out he wasn’t. He gave me his backpack and said he would collect it in a few minutes.

  24. Me and my bf were having sweet, kissy, missionary sex and I could feel him getting close. オナドールI kindly reminded him to pull out (I was on the Pill but didn’t want to risk it) and his response was,

  25. えろ 人形表示:

    However, as I hit the world of college, オナドールI was a thousand miles plus an ocean away from my mother’s watchful eye and protection.

  26. Chara表示:

    How To Outsmart Your Boss On Double Glazed Window Repair Near Me double glazed glass
    units, Chara,

  27. And if your partner still refuses to have period sex? jydoll“There will be some people who aren’t aroused by period sex in any way,” she admits,

  28. 人形 エロ表示:

    but his attempts to get away are useless as he craves to セックス ロボットget closer to a woman he can’t have. a woman who belongs to another man.

  29. I wanted to lose my virginity, セックス ロボットbut I didn’t want my first time to be with someone I was in a relationship with. I’d heard stories from people who gave their virginity to their boyfriends and had their hearts broken.

發佈留言

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