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

5,808 Responses

  1. ArmandoSausy表示:

    http://onlinepharmacyworld.shop/# canadian pharmacy without prescription

  2. DomenicEcoff表示:

    buy prednisone without prescription: prednisone 50 mg coupon – prednisone 20 mg tablets

  3. Jameswaw表示:

    can i buy generic clomid online cost clomid no prescription buying clomid

  4. Jameswaw表示:

    prednisone cream over the counter buy prednisone online no script cortisol prednisone

  5. BrainDer表示:

    http://clomida.pro/# clomid tablet

  6. Jameswaw表示:

    buy generic zithromax online zithromax online pharmacy canada zithromax 500 mg for sale

  7. BrainDer表示:

    https://stromectola.top/# ivermectin 5ml

  8. BrainDer表示:

    https://clomida.pro/# where to get clomid

  9. tonic greens表示:

    What’s up, I want to subscribe for this web site to take newest updates, therefore where
    can i do it please assist.

  10. JosephBix表示:

    https://prednisonea.store/# buy prednisone online canada

  11. DomenicEcoff表示:

    stromectol 12mg online: buy stromectol – minocycline 50 mg tablets

  12. BryanAgist表示:

    where to buy generic clomid without dr prescription: can you buy generic clomid pill – can i purchase generic clomid without rx

  13. BrainDer表示:

    https://amoxicillina.top/# amoxicillin 500 mg brand name

  14. BrainDer表示:

    https://amoxicillina.top/# buy amoxicillin 500mg capsules uk

  15. Jameswaw表示:

    amoxicillin price canada amoxicillin 500mg price canada amoxicillin script

  16. Jameswaw表示:

    can i get clomid prices can i purchase clomid no prescription can you buy cheap clomid for sale

  17. BrainDer表示:

    http://amoxicillina.top/# amoxicillin 500 mg brand name

  18. Jameswaw表示:

    cheap clomid without insurance can i purchase clomid without prescription generic clomid online

  19. It’s a game. Five dollars is free. Try it It’s not an easy game
    ->-> 토토사이트 .COM

  20. JosephBix表示:

    https://stromectola.top/# stromectol 3 mg

  21. BrainDer表示:

    http://prednisonea.store/# prednisone 20 mg purchase

  22. WilliamHania表示:

    Услуга по сносу старых домов и вывозу мусора в Москве и Московской области. Мы предоставляем услуги по сносу старых зданий и удалению мусора на территории Москвы и Подмосковья. Услуга http://demontazh-doma-msk5.ru выполняется опытными специалистами в течение 24 часов после оформления заказа. Перед началом работ наш эксперт бесплатно приезжает на объект для оценки объёма работ и консультации. Чтобы получить дополнительную информацию и рассчитать стоимость услуг, свяжитесь с нами по телефону или оставьте заявку на сайте компании.

  23. BrainDer表示:

    http://prednisonea.store/# prednisone 5 mg cheapest

  24. JosephBix表示:

    http://prednisonea.store/# prednisone pills 10 mg

  25. BrainDer表示:

    https://azithromycina.pro/# generic zithromax medicine

  26. Jameswaw表示:

    prednisone 20 mg tablet prednisone online pharmacy prednisone 5mg cost

  27. Jameswaw表示:

    amoxicillin without a doctors prescription buy amoxicillin online without prescription prescription for amoxicillin

  28. BryanAgist表示:

    cost of cheap clomid pills: where can i get cheap clomid pill – can i get cheap clomid online

  29. DomenicEcoff表示:

    can you buy amoxicillin over the counter in canada: amoxicillin 875 125 mg tab – where can i buy amoxocillin

發佈留言

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