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

  1. えろ 人形表示:

    I just saw “that means you’re gay”,’ 女性 用 ラブドールhe tells me rom his plant-filled bedroom. ‘So, it took until I was 25 to come out, and people still find it hard to believe that [bi men] exist.’

  2. Guaranteed Online Personal Loans 전세자금 대출

  3. エロ 人形表示:

    It was only for a couple minutes or so, but turned me on so muchオナドール I was basically screaming for him to fuck me! I still think about this scene sometimes and it turns me on.”

  4. In my experience, many people with vaginas are also nervous about having period sex, ラブドール sexespecially if they’ve never done it before,

  5. えろ 人形表示:

    In my experience, many people with vaginas are also nervous about having period sex, ラブドール sexespecially if they’ve never done it before,

  6. or simply engaging in shower or bath ラブドール sexsex so you can clean while you play.

  7. エロ 人形表示:

    Here, dug up from the depths of Reddit, オナドール16 people share what they hold dear as their dirtiest and filthiest sex stories, memories, dreams and confessions.

  8. goto77表示:

    Hmm is anyone else experiencing problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end or if it’s the blog.
    Any suggestions would be greatly appreciated.

  9. In response to the many warnings ラブドール avabout premarital sex from my church, parents, and elsewhere,

  10. I handed him my underwear, he wiped off my back, セックス ロボットand his stomach, I laid down on my sleeping bag stroking myself, he laid next to me and began to jack off,

  11. Ye’s music-inspired art symbolizes of his eclectic musical and visual gifts.
    These artistic expressions go beyond just depict his albums,
    but also express his artistic vision.

    Kanye’s artistic musical expressions are sold in different styles and models.
    Spanning impractical explanations of musical models
    to reasonable illustrations of Kanye’s traditional
    record covers, these artistic representations showcase the depth of the
    icon’s musical and expressive heritage.

    A major attraction of Ye’s music-inspired art is its power to elicit feelings through visual expression. Every creation says a single adventure and furthermore brings out a great good
    pertaining to inventiveness and thus creativity and originality.

    Additionally, Ye’s music-inspired art involves expressions from
    his songs. These lyrics provide a stratum of musical and creative detail to the right create.

    Buying Kanye’s music-themed art is an memorable endure meant for supporters involving
    the man with his background music.

    Finality, Kanye’s artistic musical expressions is not only an extension of this musical and creative genius and creativity but probably
    another value when it comes to my impact within music through any world.

  12. エロ 人形表示:

    Not everyone learns about the menstrual cycle,jydoll so making sure your partner understands it is the first thing to help normalize it. After they have that understanding, express that period sex is normal and has a lot of benefits.”

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

  14. エロ 人形表示:

    Ali Wong, for instance, noted in her her stand-up special, Hard Knock Wife,えろ 人形 that she was turned on by how nonchalant a new sexual partner was when she divulged that she was getting her period.

  15. There are two types of sexual desire, she explains, “spontaneousラブドール av desire during which you become horny and then decide to act upon it or not,

  16. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several e-mails with the same comment.
    Is there any way you can remove people from that service?
    Bless you!

    My blog post: the billionaire brain wave

  17. People were being spanked, hot wax was being poured on bare skin, a man was walking around with heavy 女性 用 ラブドールweights hung from his balls. Anything was possible.

  18. エロ 人形表示:

    My dinner companions fly home the next morning, which is kind of a relief. ラブドール オナニーWere we going to be buddies at the buffet every day? I wake up feeling like the college party girl I never quite was

  19. The 10 Scariest Things About Double Glazing Companies Near Me Double Glazing Companies Near Me – http://Classicjam.Net/Bbs/Board.Php?Bo_Table=Free&Wr_Id=431934,

  20. 人形 エロ表示:

    But don’t worry if you or your partner don’t have an orgasm straight away オナドールor even at all.

  21. 人形 エロ表示:

    Take it out at the beginning and leave it on the table ラブドール avknowing that you can use it—without judgment—anytime.”

  22. 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.

  23. 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.

  24. Baratz adds, ‘[I hear] that men can’t communicate, that men are horrendous. ラブドール 女性 用And while sometimes it’s true, it’s not just because “men are assholes” – it’s because of the way they were raised.

  25. えろ 人形表示:

    I could feel him getting harder, he was not going to last much longer, セックス ロボットby this time I was very hard and getting excited, he groaned, pretty loud, saying oh fuck, oh fuck, he shot a massive load of warm cum all over my back.

  26. There are two sides to the resort: the prude side (where you can be naked) and the nude side ラブドール オナニー(where you must be naked—a policy put in place to stop fully dressed creeps from coming over just to stare).

  27. えろ 人形表示:

    Sex should, and can be, a positive and pleasurable experienceロボット セックス this is impossible if you or your partner feel like you’re not ready, or are forced into having sex.

  28. 人形 エロ表示:

    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.

  29. An orgasm happens when you are very aroused. ロボット セックスTension builds up in your body, the sexual pressure is then released in a sudden pleasurable rush.

  30. エロ 人形表示:

    and the sensations they can offer range from gentle ラブドール sexto mind-blowingly intense.

發佈留言

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