透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
vaginal and anal intercourse,ラブドール えろand group sex.
You become the only one who can give him his deepest,エロ 人形darkest desires.
エロ 人形Go from a hot and heavy make-out to kissing down their neck,chest and torso before giving and receiving prolonged oral sex with eye contact.
A small study published in UrologyTrusted Source found that L-citrulline supplements were more effective than a placebo for treating mild erectile dysfunction.Both amino acids are also found in foods.ラブドール えろ
also known as rocketcress,also known as garden cresslettuceceleryradishSUMMARYNitrate-rich foods,ラブドール えろ
cheap amoxicillin 500mg: Amo Health Pharm – amoxicillin 500
リアル ドールWorldwide,rates of teenage births range widely.
セックス ドールGood sex as you age is safe sex as you age you need to be just as careful as younger people when having sex with a new partner.You may not be able to get pregnant,
or maybe Acceptanc]For individuals and couples dealing with a lack of desire,Pasciucco sees mindfulness as key in helping reconnect with sexuality.リアル ドール
エロ 人形but it’s actually more powerful when you use it to build sexual tension.The key to using dirty talk to build sexual tension is to be really subtle and let his imagination do the heavy lifting.
オナホOnly the most serious cases—depending on the age of the child or adolescent who perpetrated the abuse—may result in legal consequences through the juvenile justice system.That’s why early intervention and treatment from a multidisciplinary perspective can be a major intervention in preventing sexually abusive behavior into adulthood.
and reduces the risk of heart disease and stroke in the adult population (8).WHO Member States have agreed to reduce the global population鈥檚 intake of salt by 30 by 2025; they have also agreed to halt the rise in diabetes and obesity in adults and adolescents as well as in childhood overweight by 2025 (9,浜哄舰 銈ㄣ儹
And thanks to the release of the bonding chemical oxytocin during sex,セックス ドールthe act can also deepen love,
7.Red wineLike apples,ラブドール えろ
3 of girls having reduced their rate since the last research,リアル ドールin 2009,
But not all teenage relationships include sex.Why it’s important to talk about pre-teen and teenage sexualityYour child will learn about sexuality at school,オナホ おすすめ
my web-site: poker Online Free
where to buy amoxicillin 500mg Amo Health Pharm amoxicillin generic
9 Things Your Parents Teach You About Double Glazing Repair Near Me
double glazing repair near me; checkbeast43.werite.net,
doxycycline 100mg lowest price: doxycycline 100mg cost in india – buy doxycycline online australia
can i order generic clomid without a prescription: can you buy cheap clomid without rx – order clomid tablets
where to buy zithromax in canada: Zithro Pharm – zithromax 500 mg for sale
https://clmhealthpharm.com/# buying generic clomid without insurance
The 10 Scariest Things About Upvc Door Repairs Near Me upvc door repairs near me – Monica –
10 Tell-Tale Symptoms You Need To Get A New Psychiatrist Private psychiatrist private near Me
See What Double Glazed Window Repairs Near Me Tricks The Celebs Are
Using window repairs Near me
zithromax online usa no prescription: zithromax online australia – zithromax online no prescription
You’ll Never Be Able To Figure Out This Patio Door Handle
Repair Near Me’s Tricks patio door handle repair near
me [Kragelund-cline-2.thoughtlanes.net]
can i purchase cheap clomid no prescription: how to buy cheap clomid tablets – can i order cheap clomid pills
All-Inclusive Guide To 2 In 1 Pram And Pushchair Baby Pram