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

93,409 Responses

  1. 5 Killer Qora’s Answers To Asbestos Attorney Mesothelioma mesothelioma lawyer (wiki.iurium.cz)

  2. Five Killer Quora Answers To Wine Fridge Integrated Wine Fridge Integrated

  3. Jorgewooff表示:

    Mexican Easy Pharm: Mexican Easy Pharm – Mexican Easy Pharm

  4. 25 Amazing Facts About Buy A1 And A2 Driving License Online Köpa Svenskt körkort

  5. Alena表示:

    How Train Accident Lawyer Became The Hottest Trend
    In 2023 trucking wreck lawyer (Alena)

  6. Sofa Sale表示:

    Guide To Black Friday Sofa Sale: The Intermediate
    Guide The Steps To Black Friday Sofa Sale Sofa Sale

  7. Jorgewooff表示:

    Mexican Easy Pharm: mexico pharmacies prescription drugs – Mexican Easy Pharm

  8. Nine Things That Your Parent Taught You About Citroen Xsara Picasso
    Key Fob Replacement Citroen xsara Picasso key

  9. Carrolleruck表示:

    https://indiancertpharm.shop/# Indian pharmacy international shipping
    reddit canadian pharmacy

  10. 15 Best Attorney For Asbestos Bloggers You Must
    Follow mesothelioma lawsuit

  11. Brandonnot表示:

    mexican rx online: mexico drug stores pharmacies – medication from mexico pharmacy

  12. Five Killer Quora Answers On Best Lightweight Single Stroller best lightweight single stroller
    (http://www.yyml.online)

  13. Jorgewooff表示:

    mexico pharmacies prescription drugs: Mexican Easy Pharm – pharmacies in mexico that ship to usa

  14. You’ll Never Be Able To Figure Out This Ai Sentence Rewriter’s Secrets ai sentence rewriter

  15. The 9 Things Your Parents Taught You About Leather U Shape Sectional leather u shape Sectional

  16. What Is Window Glass Replacement Near Me And Why
    Is Everyone Speakin’ About It? window pane replacement glass

  17. Guide To Upvc Windows Repairs Near Me: The Intermediate Guide In Upvc Windows Repairs Near Me
    Wood Window Repair Near Me

  18. Allie表示:

    Responsible For The Mobility Devices Budget?
    10 Very Bad Ways To Invest Your Money mobility scooters electric [Allie]

  19. Jorgewooff表示:

    Mexican Easy Pharm: Mexican Easy Pharm – mexico drug stores pharmacies

  20. Jorgewooff表示:

    medication from mexico pharmacy: mexican rx online – Mexican Easy Pharm

  21. See What Frost Free Fridge Freezer 50/50 Sale Tricks The Celebs Are Utilizing Fridge Freezer 50/50 Sale (Fridge-Freezers47508.Fliplife-Wiki.Com)

  22. Jorgewooff表示:

    mexican border pharmacies shipping to usa: buying prescription drugs in mexico – п»їbest mexican online pharmacies

  23. Buy A Real Driving Licence UK Techniques To Simplify Your Daily Lifethe One Buy A Real
    Driving Licence UK Trick Every Individual Should Learn Buy a Real driving licence uk

  24. Loyd表示:

    Mesothelioma And Asbestos Lawyer’s History History Of Mesothelioma And Asbestos Lawyer mesothelioma attorneys – Loyd

  25. 5 Pragmatic Slots Free Lessons From Professionals 프라그마틱 슬롯 환수율

  26. telegra.ph表示:

    What NOT To Do With The Best Brand Of Refrigerator Industry The best brand of refrigerator (telegra.ph)

  27. Jorgewooff表示:

    Mexican Easy Pharm: Mexican Easy Pharm – п»їbest mexican online pharmacies

發佈留言

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