透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
So basically if someone shows up to this therapist with questions or concerns about a fetish,the patient will be subjected to shameful thoughts and experiences regarding his own children and will be pushed into unpleasant and painful physical sensations.ダッチワイフ エロ
形のいい美巨乳と色白ムッチリした体がエロい女の子オナドールです。可愛らしさとエロさの融合は強力です。セックス ロボット明るく清純そうなルックスに、色白美肌ボディが特徴 ?細身ながらもほどよい肉付き感がエッチです。
人形 えろThe authors discovered that a longer perceived gap since one’s last sexual experience with a partner is associated with lower satisfaction and desire on the day but enhanced sexual desire the next day,likely in anticipation of the next encounter or wanting to improve one’s sex life.
fortified with four to six strawberry daiquiris, I attend the resort’s Tuesday-night theme party alone:ラブドール オナニーhe Bare As You Dare Glow Pool Party. Black lights are lit and glow sticks are distributed and I take off my dress and dance around sans any creepers. This is fun.
エロ ラブドールI was too fat.My sisters were too fat.
Get ready to get stunned ?in the event you have not found orドール エロ utilized these by now (don’t worry we are not judging) ?or to shop for some pleasurable, otherworldly, kinky toys you may want to check out yourself or your partner.
They’re heteronormative, damaging… and many are lumped on straight, cis menラブドール 女性 用.
Great site! I recommend to everyone!online hotel booking
The toxicity can be subtle,slowly intensifying over time,えろ 人形
15 Funny People Who Are Secretly Working In ADHD Private Assesment private Adhd assessments
a moan is “a long,low sound made by a person expressing physical or mental suffering or sexual pleasure”; and to scream is “to make a loud high cry because you are hurt,人形 えろ
8 Poverty and inequality: Despite advancements,stark economic divides and extreme poverty persist.ラブドール 女性 用
How To Get More Results From Your Birth Defect Attorney birth Defect law firm
The 9 Things Your Parents Teach You About Upvc Window Repairs Upvc Window Repair
Repairs To Upvc Windows Tools To Help You Manage Your Daily Life Repairs To
Upvc Windows Trick That Everyone Should Learn Repairs to Upvc windows
Could Double Glazed Units Near Me Be The Key To 2023’s Resolving?
Replacement Double glazed units near me (telescopedia.org)
A New Trend In Upvc Windows Near Me Upvc Window Repair
5 Reasons To Consider Being An Online Window And Door Company
Near Me Business And 5 Reasons You Shouldn’t near by
Phenomenal , what an insightful post! I really relished reading
about your opinion on this theme . It’s unquestionably given me
a copious amount to ponder .
I’d yearn to be exposed to more of your viewpoints,
if you’re willing to extending the exchange.
By the way , have you been informed of MEGA888 ? It’s an terrific online gaming hub with tons of
captivating selections . I’ve experienced there and the journey has
proved to be excellent . If you’re seeking a new way to experience
some amusement and potentially win , I’d highly advise inspecting it further.
Permit me apprise if you’re curious and I shall give more specifics !
Feel free to surf to my web-site … mega888 web
What’s up it’s me, I am also visiting this web site on a regular basis, this site
is in fact nice and the users are truly sharing nice thoughts.
“NextSpin Slot” เป็น ตัวเลือก การ เล่น ออนไลน์ที่มี ความนิยม และเป็นที่ ต้องการ
อย่างมากในปัจจุบัน ช่องทาง นี้มีให้บริการหลากหลาย เกมคาสิโนที่น่าตื่นเต้นและมีความ หลากหลายทาง ตั้งแต่ เกมสล็อตออนไลน์ เกมบนโต๊ะ และเกมอื่นๆ ที่ผู้เล่นสามารถ ตื่นเต้น
ไปกับการ พนัน ได้อย่างเต็มที่
สิ่งที่โดดเด่นเป็นพิเศษ
ของ “NextSpin Slot” คือ ความทันสมัยของการออกแบบ
ที่ทันสมัยและ ผู้มาใช้บริการมี ความเข้าใจ ที่ดี วิธีการ การ เข้าถึงการเดิมพันเกมและการ ฝาก-ถอน
เงินเป็นไปอย่าง ฉับไว และ ไว้ใจได้นอกจากนี้ ยังมี
รางวัลพิเศษและ ส่วนลด มากมายที่ผู้เล่นสามารถ ร่วมสนุกได้ เพื่อ ปรับประสิทธิภาพ โอกาสในการ ถูกรางวัล และ เสริมความ ความบันเทิงในการ ลงทุน
เนื่องจากมีฐานผู้ใช้ ที่กว้างขวางและการรองรับ หลากหลาย ภาควิชา “NextSpin Slot” จึงเป็นตัวเลือก
ที่ยอดเยี่ยม สำหรับ ผู้ที่หวังจะ ประสบการณ์การ ลงทุน ออนไลน์ที่ดีเยี่ยม ไม่ว่าคุณจะ จัดอยู่ใน
ผู้เล่น ไม่ชำนาญหรือ นักพนัน ที่มี ความคล่องแคล่ว คุณจะได้พบ กับความสนุกสนาน
และความ ลุ้นระทึก ที่
เหนือชั้น ด้วยความ ไว้วางใจ ในการ ดูแลลูกค้า และ การดูแลข้อมูลส่วนตัวอย่างปลอดภัย ของข้อมูล “NextSpin Slot” จึงเป็น ตัวเลือกที่น่าสนใจ ที่ น่าตื่นเต้น สำหรับ ผู้แสวงโชคออนไลน์
ด้วยการที่ “NextSpin Slot” มีชื่อเสียงและเป็นที่นิยมมาก ผู้เล่นจึงสามารถ
เชื่อถือได้ ในการ เล่น บนแพลตฟอร์มนี้ ซึ่งจะ ส่งเสริม ให้การ ลงทุน ของผู้เล่น ง่ายดาย รวมถึงช่วยเพิ่ม ความพึงพอใจ ในการ
ลุ้นรางวัล ได้อย่างมาก
โดยทั่วไป “NextSpin Slot” ถือเป็น
ช่องทาง การ ลงทุน ออนไลน์ที่ได้รับความนิยม อย่างมากในปัจจุบัน ด้วยคุณสมบัติที่ ยอดเยี่ยม ในด้านต่างๆ รวมถึง ความทันสมัย ที่ดี ระบบ การทำธุรกรรม ที่ ปลอดภัย รวมถึง ข้อเสนอพิเศษ ที่น่าสนใจ ทำให้ “NextSpin Slot”
เป็น แหล่งเดิมพัน ที่
ยอดเยี่ยม ที่ผู้เล่น ควรเลือกปฏิบัติอย่างแน่นอน
โดยเฉพาะอย่างยิ่ง สำหรับผู้เล่นที่ต้องการประสบการณ์ ในการเดิมพันออนไลน์ที่ เป็นเลิศ “NextSpin Slot” จะเป็น แหล่งพนัน ที่ น่าไว้วางใจ อย่างยิ่ง ไม่ว่าคุณจะเป็นผู้เล่น ไม่ค่อยคุ้นเคย หรือ นักลงทุน “NextSpin Slot” ก็พร้อมที่จะ ให้ ประสบการณ์การ ลุ้นรางวัล ที่ เร้าใจ ให้กับคุณอย่างแน่นอน
ในภาพรวม “NextSpin Slot” จึงเป็น ระบบ การ ลุ้นรางวัล ออนไลน์ที่ เป็นที่ชื่นชอบ อย่างมาก ด้วยคุณภาพการให้บริการ ที่โดดเด่น
รวมถึง ความสมบูรณ์แบบ ของเกมและโปรโมชันต่างๆ ที่น่าสนใจ ทำให้ “NextSpin Slot” เป็น ทางเลือก ที่ อันดับต้นๆ สำหรับนักพนันออนไลน์ที่ต้องการประสบการณ์ ที่ยอดเยี่ยม
Review my homepage – เครดิตฟรีคาสิโนออนไลน์
The No. 1 Question That Anyone Working In Dripper Coffee Maker Must Know
How To Answer drip coffee maker
The No. Question That Everyone In Upvc Windows Repair Should Be Able Answer repair upvc windows (Alejandrina)
20 Trailblazers Leading The Way In Door Repair Near Me
window Replacement near me
See What Repair Upvc Windows Tricks The Celebs Are Utilizing
Repair Upvc Windows – Homezdna.Com –
The 9 Things Your Parents Teach You About Window Replacement Near Me window replacement near me
(Celesta)
What’s The Fuss About Adult ADHD Medication Uk? Can you get adhd medication Without a diagnosis
Oynamak icin harika bir kumarhane Sweet bonanza
Ten 18 Wheeler Accident Law Firms That Really
Help You Live Better 18 Wheeler Accident law firms
10 Things We All Hate About Window And Door Repair Near Me replace