透過網頁讀取PSD後，依圖層輸出PNG檔案
在前面介紹過網頁可以讀取PSD檔案並擷取到該檔案的資訊，接著我們會希望能透過網頁上傳PSD檔之後，依照圖層來輸出圖片，同樣是利用PSD.js來輔助進行，可以透過我們製作的範例頁面來進行輸出測試。
預設輸出效果
透過PSD.js可將PSD內的各圖層輸出成PNG圖檔，亦可轉成Base 64圖檔格式，惟輸出時每個圖檔的尺寸並不會根據整體PSD檔大小來配置。
<!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中並不具備這樣的功能，於是我們透過下述的方式來達成：
- 擷取PSD資訊並將圖檔轉為Base 64格式
- 產生與PSD尺寸大小相同的HTML Canvas
- 將產生的Base 64圖檔，依照原始位置放入Canvas中
- 將Canvas轉成PNG圖檔
可以參考我們製作的範例頁面
<!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. 無法輸出帶有遮色片效果的圖片
解決方法：將圖層轉為智慧型物件，即可輸出相對應的圖檔。
3. 無法依圖層混合模式輸出圖片
解決方法：無法解決
Bu kumarhanedeki en iyi oyunlar Sweet bonanza
The story of the Moroccan footballer https://al-hilal.yassine-bounou.com, who became a star at Al-Hilal, traces his journey from the streets of Casablanca to international football stardom and his personal development.
เกมสล็อตออนไลน์ ‘Joker Slot Game’
‘Joker Slot Game’ เป็น เกมการพนันออนไลน์
ที่หวังจะ ความนิยม อย่างมากมาย ในปัจจุบัน เกมนี้ มี ที่มากมาย และมี การยอมรับ จากผู้ติดตาม
ในขั้นแรก จากการพัฒนา ที่เป็นเอกลักษณ์ และสร้างความตื่นตาตื่นใจ ด้วย ภาพต่างๆ และเครื่องหมาย ที่เชื่อมโยง
กับตัวละครหลัก โจ๊กเกอร์ตัวน่ากลัว อันเป็นที่
ได้รับความนิยม อย่างกว้างขวาง ในวงการภาพยนตร์ นอกจากนี้ ยังประกอบด้วย เสียง สร้างสรรค์ ให้นักพนัน ได้รับ เย่อหยิ่งเหมือน กำลังอยู่ใน ประวัติความเป็นมา
ของตัวละคร โจ๊กเกอร์ผู้บ้าคลั่ง
ในด้าน รูปแบบการเล่น ของ ‘Joker
Slot Game’ ซึ่ง มีความน่าสนใจ โดยมี รูปแบบการเล่น ที่ง่ายต่อการเข้าใจ และทำความเข้าใจ อย่างง่ายดาย ผู้เล่น พร้อมที่จะ ร่วมสนุกไปกับ กิจกรรมเดิมพัน และมุ่งมั่น ดำเนินตาม รางวัลการเงิน ที่มี มากมาย
ทางเลือก ซึ่งรวมถึงการจ่ายเงินรางวัล แบบคงที่ พร้อมด้วยการจ่ายเงินรางวัล ที่มีความเปลี่ยนแปลง ที่ทำให้เพิ่ม ความตื่นเต้น ให้กับผู้ใช้งาน
นอกจากนี้ ‘Joker Slot Game’
ด้วย ฟีเจอร์ เฉพาะ อื่นๆ
อีกมากมาย ได้แก่
ฟีเจอร์พิเศษ การหมุนฟรี
นอกจากนี้ ‘Joker Slot Game’ ยังมีข้อได้เปรียบ หลายประการ ที่ส่งเสริม ให้เกมตัวนี้
ได้รับ ความชื่นชอบ อย่างไม่น่าเชื่อ จากกลุ่มผู้เล่น เกมวงล้อออนไลน์
แต่ทั้งนี้ ‘Joker Slot Game’ ยังมีอยู่ ข้อเปรียบเทียบ บางกรณี ซึ่ง
อาจก่อให้เกิด ความกังวล ต่อ ผู้ใช้งาน บางส่วน ในบางคน
กระนั้นก็ตาม บุคคลทั่วไป
ก็สามารถ ได้รับความตื่นเต้น อย่างเต็มที่ และสร้าง ประสบการณ์ที่ดี จากการ
ทดลองใช้ ‘Joker Slot Game’ ผู้ดูแล อาจจะต้องพิจารณา ปรับปรุง ข้อจำกัด ที่มีอยู่ ทั้งนี้เพื่อ ผู้ใช้งาน สามารถ
สนุกสนาน ด้วย ‘Joker Slot Game’ ได้อย่างเต็มที่
Here is my page: คาสิโนออนไลน์ที่ดีที่สุด (tinyurl.com)
Hello! This is my 1st comment here so I just wanted to give a quick
shout out and tell you I truly enjoy reading your
articles. Can you recommend any other blogs/websites/forums that cover the same topics?
Many thanks!
10 Life Lessons We Can Learn From Window Repair Near upvc window repair near me
If you desire to improve your experience simply keep
visiting this web site and be updated with the hottest news posted here.
Reasons Your Personal Personal Loan Application Was Declined 버팀목 대출
Super Jackpot Skill – Stop Video Slot Review 에볼루션 체험머니
What End Up Being The Top Casino Games Web Based? 에볼루션 홀덤 조작
(bowles-cooke-4.technetbloggers.de)
Отличный сатй! Всем рекомендую!скупка золота москва
ProNerve 6 nerve relief formula stands out due to its advanced formula combining natural ingredients that have been specifically put together for the exceptional health advantages it offers.
See What Double Glazing Crawley Tricks The Celebs Are Utilizing Double Glazing Crawley
高級 オナホSometimes it’s a donation of goods,services or cash,
and most Americans would support locking him up.But if a 30-year-old woman has sex with a 12-year-old boy,高級 ラブドール
人形 エロIt certainly doesn’t appear like anyone is being violated in any way,and I don’t see anyone turning their head away or pushing back anyone’s arms or other appendages,
This web site certainly has all the info I needed about
this subject and didn’t know who to ask.
Hmm is anyone else having problems with the pictures on this blog loading?
I’m trying to find out if its a problem on my end or if
it’s the blog. Any responses would be greatly appreciated.
Many reported trying to minimize feelings of shame by setting high standards for themselves.高級 オナホIn this group,
Do you have a spam problem on this blog; I also am a blogger, and I was wanting to know
your situation; many of us have created some nice methods and we are looking
to exchange solutions with others, be sure to
shoot me an email if interested.
Good day! Would you mind if I share your blog with my zynga group?
There’s a lot of people that I think would really enjoy your content.
Please let me know. Cheers
The other day, while I was at work, my sister stole my iPad and
tested to see if it can survive a thirty foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views.
I know this is entirely off topic but I had to share it with someone!
Wow, this was a really enlightening and exhaustive
commentary on the domain of decentralized virtual gaming hubs !
As someone who’s been exploring the ecosystem of crypto cryptocurrency-based
betting , I really acknowledge you examining all the fundamental aspects – from
the best virtual virtual gaming hubs with generous promotions and VIP
amenities , to the rise of anonymous options for added anonymity .
It’s fantastic to see how this space is endlessly changing to meet
the needs of the increasing thirst . I commend for
putting together such a detailed and valuable
content – it’s just the variety of knowledge I was desiring
to investigate the engaging crypto wagering platform realm .
Thank you again !
my web blog … free spin crypto casino
Guvenilir bir kumarhanede oynay?n Sweet bonanza
Hey very nice website!! Guy .. Excellent .. Amazing .. I will bookmark
your blog and take the feeds additionally?
I’m glad to seek out a lot of helpful info here
in the publish, we want work out extra techniques in this regard, thanks for sharing.
. . . . .
Excellent blog here! Also your site loads up fast! What host are you using?
Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours lol
Thanks for sharing your thoughts on accompagnement
dossier qualiopi. Regards
Pedri’s story https://barcelona.pedri-fr.com from his youth in the Canary Islands to becoming a world-class star in Barcelona, ??with international success and recognition.
If you desire to increase your know-how simply keep visiting this website and be updated with the hottest
news update posted here.
It’s remarkable to go to see this web page and reading the views of all friends on the topic of this piece of writing, while I am also zealous of getting knowledge.
Great write-up, I am regular visitor of one?¦s blog, maintain up the nice operate, and It’s going to be a regular visitor for a lengthy time.