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

62,095 Responses

  1. православный реабилитационный центр для алкоголиков https://www.xn—–7kcablenaafvie2ajgchok2abjaz3cd3a1k2h.xn--p1ai .

  2. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт бытовой техники в уфе
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  3. Профессиональный сервисный центр по ремонту серверов в Москве.
    Мы предлагаем: ремонт серверных материнских плат
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  4. CharlesdrinC表示:


    Продажа мини-погрузчиков Lonking

    Продажа мини-погрузчиков Lonking на территории России от официального
    дистрибьютора. Новая многофункциональная техника для любых задач.
    Наши машины предназначены для того, чтобы упростить вашу работу:
    от строительных площадок до складских операций.

    Высокая эффективность, надежность и инновационные решения — все,
    что вам нужно для успешных проектов. Погрузите свой бизнес в будущее
    с мини-погрузчиками Lonking!

    47% российских покупателей выбрали мини-погрузчики Lonking в 2023 году
    продано более 1200 единиц.
    Lonking

  5. препарат после кодировки от алкоголя https://xn—-7sbbfcijbwcrwtjcjarh1adw8u.xn--p1ai/ .

  6. mirtinvest.ru表示:

    Ищешь займ, который реально одобрят? У нас на mirtinvest.ru более 40 лицензированных МФО, готовых выдать микрокредит на карту онлайн без отказов. Минимальные требования и ставка до 0,8% в день — идеальные условия для тех, кто ценит своё время и не хочет рисковать. Заходи, выбирай своё предложение и получай деньги за считанные минуты. Всё просто и доступно!

  7. Профессиональный сервисный центр по ремонту объективов в Москве.
    Мы предлагаем: цены на ремонт объективов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  8. Профессиональный сервисный центр по ремонту принтеров в Москве.
    Мы предлагаем: надежный сервис ремонта принтеров
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. Профессиональный сервисный центр по ремонту серверов в Москве.
    Мы предлагаем: срочный ремонт сервера
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  10. DouglasHoapy表示:

    1xBet Singapore https://actuchomage.org/includes/wkl/code_promo_69.html
    1xBet offers a localized experience for users in Singapore, including region-specific promo codes and bonuses. These promotions are tailored to the preferences of Singaporean users, providing them with the best possible betting experience.

  11. Профессиональный сервисный центр по ремонту серверов в Москве.
    Мы предлагаем: ремонт и обслуживание серверов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. See What Double Glazed Windows Repairs Tricks The Celebs Are Using windows Repairs

  13. HeathZex表示:

    pharmacie en ligne france livraison belgique: pharmacie en ligne sans ordonnance – Pharmacie Internationale en ligne

  14. Профессиональный сервисный центр по ремонту принтеров в Москве.
    Мы предлагаем: ремонт принтеров рядом
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  15. Caren表示:

    8 Tips To Increase Your Upvc Door Hinge Replacement Game window
    hinge repair costs (Caren)

  16. Профессиональный сервисный центр по ремонту принтеров в Москве.
    Мы предлагаем: починка принтера на дому
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  17. Профессиональный сервисный центр по ремонту принтеров в Москве.
    Мы предлагаем: мастер по ремонту принтеров на дому
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  18. Профессиональный сервисный центр по ремонту принтеров в Москве.
    Мы предлагаем: ремонт принтеров сервисный
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  19. Профессиональный сервисный центр по ремонту серверов в Москве.
    Мы предлагаем: обслуживание сервер цена
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  20. Профессиональный сервисный центр по ремонту принтеров в Москве.
    Мы предлагаем: техник ремонт принтеров
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  21. Профессиональный сервисный центр по ремонту плоттеров в Москве.
    Мы предлагаем: ремонт плоттера
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  22. Howdy just wanted to give you a quick heads up.
    The text in your article seem to be running off the screen in Chrome.
    I’m not sure if this is a formatting issue or something to
    do with web browser compatibility but I thought I’d post to let you know.

    The layout look great though! Hope you get the problem fixed soon. Thanks

  23. The One 4 Wheel Mobility Scooter For Adults Mistake That Every Beginner Makes 4 wheels scooter electric

  24. Everything You Need To Know About Mobility Scooter Affordable electric scooters

  25. Stephengen表示:

    https://pharmaciepascher.pro/# pharmacie en ligne fiable

  26. Hello it’s me, I am also visiting this website on a regular basis, this site is truly fastidious and the users are in fact sharing fastidious thoughts.

  27. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервис центры бытовой техники уфа
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  28. Профессиональный сервисный центр по ремонту плоттеров в Москве.
    Мы предлагаем: ремонт плоттеров принтеров
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  29. Eldon表示:

    Nine Things That Your Parent Teach You About Coffee Beans And Grinder coffee beans and grinder (Eldon)

發佈留言

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