透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
You’ll Be Unable To Guess Upvc French Door Lock Replacement’s Secrets french door lock replacement (marvelvsdc.Faith)
10 Best Local SEO Agency Tips All Experts Recommend top seo agency london
A Look Into The Future What Will The Sectional Sofas For Sale Industry Look Like In 10 Years?
leather sofas for sale near me (Tresa)
Are The Advances In Technology Making Samsung Refrigerator
Better Or Worse? Samsung vs samsung fridge
15 Current Trends To Watch For Under Counter Fridge
– Silver Commercial Fridges Sale
15 Gifts For The Mesothelioma Asbestos Lawyer Lover In Your Life Mesothelioma Lawsuits
10 Facts About Car Keys Cut Near Me That Will Instantly Put You In A Good Mood places
to get keys cut near me (Mable)
9 Things Your Parents Taught You About Car Wreck Attorney Car wreck attorney
This Is The Complete Listing Of Best Local SEO Company Dos And
Don’ts local Ranking
The 10 Most Terrifying Things About SEO Software
And Tools seo software and tools, Betsey,
20 Reasons Why Three Wheel Mobility Scooters Sale Will Never Be Forgotten new mobility scooters for sale near me
What’s up, everything is going nicely here and ofcourse every one is sharing information, that’s really good, keep up writing.
10 Things We Hate About Link Collection Site 주소모음
(April)
Sex dolls can enhance human relationships by allowing individuals to セックス ボットfulfill their sexual desires without the risk of hurting or offending their partner.
Another big taboo subject for many Black women to discuss openly is their participation in BDSM sexual experiences.Having been cast in the aforementioned stereotypes in America,ラブドール オナニー
Look,えろ 人形we all have bad days,
https://fastpillsformen.com/# sildenafil online
Generic Cialis without a doctor prescription: Cialis 20mg price – Generic Tadalafil 20mg price
ドール エロworkingmen (and,indeed,
高級 ラブドールSexual withdrawers can help change this dynamic with proactive ways to engage around sex; not necessarily to have more sex.Talking with your partner is the best way to get on the same page.
The erotic times may appear just a little tame by later standards初音 ミク ラブドール Nonetheless they have been especially daring again from the day.
Here’s A Little-Known Fact About French Style Fridge Freezers.
French Style Fridge Freezers french door Fridge freezer fisher and paykel
Best Accident Lawyers: The Good, The Bad, And The Ugly injury law firm [Karolyn]
Here’s a big assortment of Mini Intercourse Doll初音 ミク ラブドール offered from credible Mini Intercourse Doll manufacturing facility listing to maintain your Little ones or Animals actively engaged and entertained for several hours.
explore their desires and boundaries. The love dolls can also help people セックス ボットcommunicate about their sexual desires and boundaries,leading to improved communication in real-life relationships.
To figure out whether you’re smoking pot,it’s better for me to ask whether your friends are smoking,ドール エロ
it lengthens.By the time men hit 40,ラブドール 高級
pay attention to your speech and actions,and work to pepper in additional positive comments when you notice you’ve been critical or pessimistic.エロ 人形
we would expect men to be more inclined to engage in casual sex after having missed an opportunity and feeling regret.ラブドール オナニーBut this isn’t what the researchers found.
on the other h too much prissiness about sex would cut down on mating opportunities,えろ 人形which would work against a man’s reproductive fitness.