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

  1. Kanye West music art illustrates of his manifold musical and innovative abilities.
    These artistic representations not only honor his songs, but also evoke
    his artistic ideas.

    Kanye West musical creations are distributed in several styles and types.
    Covering abstract meanings of musical outlines to real
    explanations of Ye’s traditional album artwork, these designs display the richness
    of the icon’s musical culture.

    A main draw of Ye’s music-inspired art is its potential to trigger responses through aesthetic depiction. Each individual art piece explains us some sort of facts
    and in addition, then evokes the right reason why relating to inventiveness as well as creativity and as well.

    Also, Kanye’s music-inspired artworks involves lines from his records.
    These words inject a tier of musical and imaginative depth
    of field to a create.

    Searching for Kanye’s music-inspired artworks can be a unique and innovative practical experience meant for supporters
    associated with Kanye with his background music.

    Finality, Ye’s music-inspired art isn’t simply an expression of his or her musical and innovative legendary
    additionally but another right towards the endure from music on the entire world.

  2. エロ 人形表示:

    , 47 of men said that they can be happy with little, or no, sex in a relationship, ラブドール 女性 用while 28 of young men under 30 haven’t had sex in the past year, a figure that’s tripled since 2018.

  3. えろ 人形表示:

    When people with vaginas are experiencing pleasure and especially experiencing orgasm it えろ 人形can release dopamine and other endorphins that feel good, like oxytocin,” she explains.

  4. えろ 人形表示:

    Wasn’t that long either, but we both knew that we didn’t have to worry about STDs.オナドール So, make sure you folks also consider the health side effects since that is important too and wear protection ALWAYS.”

  5. えろ 人形表示:

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

  6. えろ 人形表示:

    For some, whether it’s in their own sex lives or reading up about othersオナドール it’s a matter of the dirtier, the better.

  7. えろ 人形表示:

    Cross-dressing and sex was one of the sexiest thing I’ve ever experienced with オナドールmy bf. It’s surreal, sex was about an hour long.

  8. If their concern is seeing blood, you can throw out ideas such jydollas having sex without the lights on or skipping oral sex.”

  9. The fact that my husband and I shared our first kiss at the altar usuallyラブドール av gets plenty of incredulous gasps.

  10. えろ 人形表示:

    Dr. O’Reilly goes on to point out some of the benefitsラブドール av of the best sex games, including “learning more about one another’s desires, boundaries,

  11. えろ 人形表示:

    With cum dripping down my back, down my ass,セックス ロボット and on to my sleeping bag, and my cock hard as a rock hard

  12. 人形 エロ表示:

    What’s wrong with me?’ when their male partners turned down sex, ラブドール 女性 用none of us even stopping to consider that he might be tired, or not feel that great about his body that day.

  13. えろ 人形表示:

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

  14. えろ 人形表示:

    Let’s pick another card’ or ‘Let me spin again.’ If your partner asks you why, ラブドール avthere’s nothing wrong with saying ‘I’m just not comfortable going there but let’s keep playing.'”

  15. エロ 人形表示:

    down there unless you’re at close range. ラブドール オナニーNature put in a portico.

  16. 人形 エロ表示:

    When I get home, everyone wants to hear the outrageous stories I might provide.えろ 人形 And I’ll share them (I’m sharing them now), but I hesitate to laugh because those people had something the rest of us don’t

  17. 人形 エロ表示:

    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?

  18. エロ 人形表示:

    She found, largely, that they did. ‘I found that men want to feel ラブドール 女性 用desired and receive romantic gestures, rather than always being the one to initiate those things,’ she says.

  19. they release hormones that help you “chemically and emotionally bond with your lover'” ラブドール avand those increased bonds “facilitate you into being more physical with your lover.”

  20. エロ 人形表示:

    A little yellow plastic island floats toward a deeper end,ラブドール オナニー so I swim out to it and then climb up. I lie on my back in the sun like a cat, or maybe a seal, in view of the entire resort or any low-circling airplanes.

  21. えろ 人形表示:

    Dr. Olson recommends designating a specific towel for period sex or ラブドール sexputting down a plastic bag if you’re in a pinch.

  22. We do a lot of CNC and dirty talking and loads of role playオナドールtoo. And when he licks my butthole it’s just a whole new feeling every time and my entire body starts going wild it feels so good.

  23. えろ 人形表示:

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

  24. えろ 人形表示:

    The first time I had sex, a year ago, セックス ロボットI was a second-year undergraduate student. I was 21 years old and had never dated before, still haven’t.

  25. エロ 人形表示:

    as well as by how they’re feeling about themselves. Each person experiences that in aえろ 人形 different way.”

  26. It’s very effortless to find out any matter on net as compared to textbooks, as I
    found this post at this web site.

  27. えろ 人形表示:

    I encourage asking them what about it grosses them out,jydoll Frye-Nekrasova advises. “A lot of the apprehension people have is because they don’t fully understand the period, so offering some additional knowledge can help.

  28. エロ 人形表示:

    Your feelings about sex can change depending on the ロボット セックスpartner you’re with, too. Plus, you might have had one kind of sex before – but that doesn’t mean you’re automatically into every other kind of sex

  29. 人形 エロ表示:

    You also don’t have to do everything all at once –オナドール if you’re not ready for penetrative sex you might want to just try foreplay. Take it at the pace that you feel comfortable with and try things out to see if you and your partner enjoy them.

  30. It’s also important to remember: just because you consent to sex once, ロボット セックスit doesn’t mean you’re signing up for sex with that person whenever they feel like it. Likewise, consent for one kind of sex doesn’t mean consent for all types of sex.

發佈留言

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