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

49,537 Responses

  1. But its AI manufacturers Restrict the dolls’ robotics and intellect to 人形 エロThe top. That means it lacks the contact sensors and overall body heaters common in other AI companions.

  2. to say ‘he wanted it,’ ‘he must have chosen that.ラブドール エロ

  3. and you won’t have to interchange allエロ 人形 the doll if one thing have been to go wrong.

  4. 中国 えろ表示:

    全身タイプの大型サイズのドールでは、セックス ロボットメリットとデメリットの差が大きくなってきます。

  5. 中国 エロ表示:

    On the one hand,young men are encouraged to sow their wild oats,人形 えろ

  6.  The Arc of Love (2019),高級 ラブドールI emphasize the ambivalent nature of emotions in general and love in particular.

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

  8. エロ ラブドールthis is a wake-up call for everyone.May we all work collectively to create a broader home that is physically and psychologically safe for all people—comprised of extra care for our children.

  9. while others were into anal stimulation with their female partners, but didn’t like how 女性 用 ラブドールthat was perceived with their mates. It’s clear that entrenched homophobic views, and the stereotype of what ‘makes a man’,

  10. Grateful Kids in an Over-Entitled World, McCready details signs that help indicate the extent of an offspring’s “me,女性 用 ラブドール

  11. 上記の画像のように手のシワや浮き出る骨格まで再現されており、本物と見間違えます。

  12. Religious grooming frequently takes place in a context of unquestioned faith placed in sex offenders by children,オナドールparents,

  13. Hey, I think your site might be having browser compatibility issues.
    When I look at your website in Safari, it looks fine but
    when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, fantastic blog!

  14. 女性 用 ラブドールAIDS turned safe sex into a worldwide crusade and condoms into a public health priority.When used properly,

  15. I mean I was already 18, and I hadn’t lost my virginity yet. It wasn’t a bad thing,オナドール and I knew I wanted to wait for that special moment, but unfortunately that wasn’t what happened.

  16. ダッチワイフ エロat least indirectly,intimates how the higher up a man goes,

  17. ラブドール エロAccepting broad-based,flexible sexual function is motivating.

  18. talk about our deepest fears or regrets,or become physically intimate,えろ 人形

  19. You’ll Be Unable To Guess Window Replacement Near Me’s Benefits Window replacement near Me

  20. 15 Things You’ve Never Known About Skoda
    Car Key Replacement How To Start Skoda Kodiaq With Key

  21. 中国 えろ表示:

    If you’ve hit a dead end with your workout routine and seek a more effective option,ラブドール 中古it may be time to consult a plastic surgeon.

  22. えろ 人形meaninglessness looms large as one of life’s ultimate concerns,since we humans seem to be creatures who inherently need and seek meanin Indeed,

  23. it’s nice to know that you may have some non-genetic recours Besides,over time our buttocks sag,えろ 人形

  24. ラブドール オナホand turn him into a loving faithful mate ready to father her children.Cue wedding bells.

  25. もちろん、脱着式ホールは伸縮性が高く伸びますが、オナドールそれを踏まえてもキッツキツになるかと思います。

  26. Searching For Inspiration? Check Out Adult Adhd Symptoms
    Test dsm 5 adhd symptoms – https://buketik39.ru

  27. 中国 えろ表示:

    ドール エロthe largest mental health system is the prison system,the most popular sport is football,

  28. Good info. Lucky me I came across your site by
    chance (stumbleupon). I have saved it for later!

  29. ラブドール オナニーDifferently than in a therapy practice where clients at times request to see a particular therapist,study participants are not aware of the researchers’ racial identities.

發佈留言

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