馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

透過網頁讀取PSD後，依圖層輸出PNG檔案

by · 2020-04-30

在前面介紹過網頁可以讀取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...

53,243 Responses

  1. RobertExags表示:
    2024-01-2704:04:22

    https://indianpharmacy.shop/# top online pharmacy india indianpharmacy.shop
    india pharmacy

    回覆
  2. RobertExags表示:
    2024-01-2703:28:52

    https://indianpharmacy.shop/# india pharmacy indianpharmacy.shop
    pharmacy website india

    回覆
  3. TimothyRor表示:
    2024-01-2702:29:07

    mexican rx online mexican pharmacy online mexico drug stores pharmacies mexicanpharmacy.win

    回覆
  4. RonaldLiC表示:
    2024-01-2701:34:52

    https://indianpharmacy.shop/# pharmacy website india indianpharmacy.shop
    prescription drugs without doctor approval

    回覆
  5. RobertExags表示:
    2024-01-2701:32:51

    https://canadianpharmacy.pro/# canadian pharmacy price checker canadianpharmacy.pro
    best online pharmacy india

    回覆
  6. RonaldLiC表示:
    2024-01-2623:47:45

    https://canadianpharmacy.pro/# onlinecanadianpharmacy 24 canadianpharmacy.pro
    best online pharmacies reviews

    回覆
  7. MichealCaree表示:
    2024-01-2623:38:53

    http://indianpharmacy.shop/# buy medicines online in india indianpharmacy.shop

    回覆
  8. TimothyRor表示:
    2024-01-2623:16:08

    reputable mexican pharmacies online Medicines Mexico mexican rx online mexicanpharmacy.win

    回覆
  9. RonaldDaf表示:
    2024-01-2622:48:05

    https://mexicanpharmacy.win/# п»їbest mexican online pharmacies mexicanpharmacy.win

    回覆
  10. MichealCaree表示:
    2024-01-2622:15:30

    http://canadianpharmacy.pro/# canadian pharmacy meds canadianpharmacy.pro

    回覆
  11. Wvcnpx表示:
    2024-01-2622:10:38

    ventolin inhalator drug buy ventolin 4mg pill best asthma pills

    回覆
  12. TimothyRor表示:
    2024-01-2621:46:59

    india online pharmacy Order medicine from India to USA pharmacy website india indianpharmacy.shop

    回覆
  13. RobertExags表示:
    2024-01-2621:40:26

    http://canadianpharmacy.pro/# canadian pharmacy 24 com canadianpharmacy.pro
    indian pharmacies safe

    回覆
  14. RobertExags表示:
    2024-01-2621:03:53

    https://canadianpharmacy.pro/# canada rx pharmacy canadianpharmacy.pro
    india online pharmacy

    回覆
  15. TimothyRor表示:
    2024-01-2619:14:22

    buying prescription drugs in mexico online mexican drugstore online п»їbest mexican online pharmacies mexicanpharmacy.win

    回覆
  16. RobertExags表示:
    2024-01-2619:10:33

    http://indianpharmacy.shop/# cheapest online pharmacy india indianpharmacy.shop
    Online medicine home delivery

    回覆
  17. MichealCaree表示:
    2024-01-2616:29:40

    https://canadianpharmacy.pro/# vipps canadian pharmacy canadianpharmacy.pro

    回覆
  18. TimothyRor表示:
    2024-01-2616:02:34

    mexico drug stores pharmacies Mexico pharmacy mexican rx online mexicanpharmacy.win

    回覆
  19. RobertExags表示:
    2024-01-2615:15:01

    http://mexicanpharmacy.win/# medicine in mexico pharmacies mexicanpharmacy.win
    indian pharmacy

    回覆
  20. MichealCaree表示:
    2024-01-2615:07:34

    http://indianpharmacy.shop/# best india pharmacy indianpharmacy.shop

    回覆
  21. RobertExags表示:
    2024-01-2614:37:11

    http://canadianpharmacy.pro/# canadian pharmacy antibiotics canadianpharmacy.pro
    top 10 pharmacies in india

    回覆
  22. RonaldLiC表示:
    2024-01-2614:33:59

    https://mexicanpharmacy.win/# purple pharmacy mexico price list mexicanpharmacy.win
    best online pharmacies no prescription

    回覆
  23. TimothyRor表示:
    2024-01-2614:32:22

    india pharmacy online shopping pharmacy india buy medicines online in india indianpharmacy.shop

    回覆
  24. RobertExags表示:
    2024-01-2612:43:46

    https://mexicanpharmacy.win/# buying prescription drugs in mexico mexicanpharmacy.win
    buy prescription drugs from india

    回覆
  25. RonaldLiC表示:
    2024-01-2612:21:57

    https://mexicanpharmacy.win/# mexican drugstore online mexicanpharmacy.win
    online pharmacies no prescription required pain medication

    回覆
  26. TimothyRor表示:
    2024-01-2612:08:29

    online pharmacy india Best Indian pharmacy world pharmacy india indianpharmacy.shop

    回覆
  27. RonaldDaf表示:
    2024-01-2611:39:21

    http://canadianpharmacy.pro/# canadian pharmacy phone number canadianpharmacy.pro

    回覆
  28. MichealCaree表示:
    2024-01-2609:50:46

    https://indianpharmacy.shop/# india online pharmacy indianpharmacy.shop

    回覆
  29. TimothyRor表示:
    2024-01-2609:10:29

    top 10 pharmacies in india international medicine delivery from india reputable indian pharmacies indianpharmacy.shop

    回覆
  30. RobertExags表示:
    2024-01-2608:54:56

    http://indianpharmacy.shop/# indian pharmacy paypal indianpharmacy.shop
    top 10 online pharmacy in india

    回覆

發佈留言

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