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

61,822 Responses

  1. So, what happens when you find that the fear of coming out means you’re alsえろ 人形o forced to miss out on the fun things,

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

  3. pravo752obliz表示:

    Тут можно получить качественные Услуги юриста.

  4. HaroldBig表示:

    buy cheap ozempic: buy ozempic pills online – buy cheap ozempic

  5. lovedoll表示:

    allowing them to form a bond with their favorite characterえろ 人形 in a way that goes beyond traditional merchandise or collectibles.

  6. Firstly, it is necessary to regularly clean sex doll wig. Due to the special nature of wig materials, 人形エロit is recommended to use special wig cleansers or mild shampoos for washing.

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

  8. Francisca表示:

    I have to thank you for the efforts you have put in penning this website.
    I’m hoping to view the same high-grade blog posts by you in the future
    as well. In fact, your creative writing abilities has encouraged
    me to get my very own website now 😉

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

  10. 15 Reasons Not To Ignore Asbestosis Asbestos Mesothelioma Attorney mesothelioma Lawyer

  11. If you crave more contact, you can also snuggle up to your 人形 エロsex doll in bed, wrap your arms around the doll,

  12. SamuelPogma表示:

    Automatic takeoffs are coming for passenger jets and they’re going to redraw the map of the sky
    kra cc

    In late 1965, at what’s now London Heathrow airport, a commercial flight coming from Paris made history by being the first to land automatically.

    The plane – A Trident 1C operated by BEA, which would later become British Airways – was equipped with a newly developed extension of the autopilot (a system to help guide the plane’s path without manual control) known as “autoland.”

    Today, automatic landing systems are installed on most commercial aircraft and improve the safety of landings in difficult weather or poor visibility.

    Now, nearly 60 years later, the world’s third largest aircraft manufacturer, Brazil’s Embraer, is introducing a similar technology, but for takeoffs.

    Called “E2 Enhanced Take Off System,” after the family of aircraft it’s designed for, the technology would not only improve safety by reducing pilot workload, but it would also improve range and takeoff weight, allowing the planes that use it to travel farther, according to Embraer.

    “The system is better than the pilots,” says Patrice London, principal performance engineer at Embraer, who has worked on the project for over a decade. ”That’s because it performs in the same way all the time. If you do 1,000 takeoffs, you will get 1,000 of exactly the same takeoff.”

    Embraer, London adds, has already started flight testing, with the aim to get it approved by aviation authorities in 2025, before introducing it from select airports.

  13. One of the first things that the pandemic quickly ruled out was close social interaction, 人形 エロmeaning no hugs, massages or even handshakes.

  14. Having innate confidence in your sexual prowess isn’t a えろ 人形given for many of us.

  15. SexDolls-Shop, My Robot Doll,エロ 人形 and Silicone Lovers are all trustworthy vendors. I have personally vetted each of them, and can guarantee they sell authentic dolls at reasonable prices.

  16. irontech doll表示:

    it could be that you’re also curious about how sex might work,えろ 人形frustrated that you aren’t having enough of it or keen to experiment now that you’re

  17. If you’ve only just come to the realization that you may be gay,えろ 人形 or haven’t yet found someone to connect with,

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

  19. 人形 エロ表示:

    ind a suitable location where you can clean the sexdollえろ 人形 comfortably, such as a large sink or bathtub. Lay down a clean towel or soft surface to protect the doll from any potential damage.

  20. 人形 エロ表示:

    Additionally, they’re highly-praised by the doll community, エロ 人形including The Doll For

  21. Being worried about what others may think or say can be hugely stressful and えろ 人形that can often mean that others reactions, feelings and opinions take over and become the main focus.

  22. (and taking everything off) with a man. If you haven’えろ 人形t yet come out

  23. lovedoll表示:

    whether you’re popping your cherry and having sex with a doll for the first time or are just lookingえろ 人形 for a few new tips and tricks to keep things feeling fresh and exciting.

  24. If you’re new to sex dolls, エロ 人形you probably have no idea where to buy one. Sex dolls are on the rise, but so are scammers!

  25. 人形 エロ表示:

    While men typically do not contract UTIs from sexual activity,人形エロ if there’s a sensation of needing to urinate after sex, it might help flush out any bacteria acquired during sexual contact.

  26. 中国 爆乳表示:

    to find out exactly what is most pleasing to youえろ 人形.

  27. As the owner of a sex doll brothel, I’ve had the opportunity to purchase 10+ sex dollsエロ 人形 from various vendors and brands. When it comes to finding the perfect product,

  28. Cheap, counterfeit dolls have flooded the marketplace,エロ 人形 and it’s harder than ever to find a trustworthy website.

發佈留言

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