透過網頁讀取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,795 Responses

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

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

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

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

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

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

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

  8. Noble表示:

    Technology Is Making Affordable Search Engine Optimization Better Or Worse?
    search engine optimization packages (Noble)

  9. Timothystoft表示:

    canadian drug: Online medication home delivery – canadian drug pharmacy

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

  11. Timothystoft表示:

    canada pharmacy: Online medication home delivery – canadian online pharmacy

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

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

  14. RogerTut表示:

    canadian pharmacy 24h com safe: Canadian Pharmacy – canadian pharmacy ltd

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

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

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

  18. Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники в воронеже

  19. Steveninela表示:


    Новые методы лечения болезни Паркинсона в клинике Neuro Implant Clinic.
    Акупунктура уха – новый метод лечения болезни Паркинсона, Альцгеймера, Рассеянного Склероза.
    Выездное лечение в разные Страны.
    Отзывы нашего метода на официальном сайте Neuro Implant Clinic.

  20. Jamesruigo表示:

    http://canadapharma.shop/# canadian pharmacy phone number

  21. Pragmatic Slot Recommendations: The Ugly Reality About Pragmatic Slot Recommendations 프라그마틱 슬롯무료

  22. Sheila表示:

    The Most Hilarious Complaints We’ve Seen About Pragmatic 프라그마틱 무료체험 슬롯버프 (Sheila)

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

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

  25. RobertWAisa表示:

    medication from mexico pharmacy mexican pharma best online pharmacies in mexico

  26. Если вы искали где отремонтировать сломаную технику, обратите внимание – выездной ремонт бытовой техники в воронеже

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

  28. Лучшие стили для тактичной одежды, тактичные куртки.
    Где найти тактичный стиль в одежде, для модных мужчин и женщин.
    Тактичные наряды для повседневной носки, которые не выйдут из моды.
    Какие аксессуары подойдут к тактичной одежде, чтобы выглядеть стильно и уверенно.
    Секреты удачного выбора тактичной одежды, для создания тенденций.
    купить тактичний одяг купить тактичний одяг .

  29. Conrad表示:

    The Complete Guide To Realistic Sex Doll most realistic looking sex doll (Conrad)

  30. Privatehd.Org表示:

    8 Tips To Increase Your Adult Toy Game Adult Toy Vibrators (Privatehd.Org)

發佈留言

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