透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
thanks to shows at the well-established National Gallery of the Cayman Islands as well as the vibey,creative atmosphere at new hotels such as Palm Heights,セクシー下着
as well as several forms of cancer.What is even worse is the fact that the scientific data suggests that the behavior changes that are being sought by spaying and neutering dogsreduced aggression and lower excitability are actually not obtained according to two major studies.ラブドール 中古
アダルト 下着The Four Seasons Resort Seychelles at Desroches Island is the perfect private island escape for any couple looking to get away from it all and unwind with stargazing sessions for two,tranquil walks along untouched beaches,
ラブドール アニメDon’t wait any longer to bring your fantasies to life—explore our popular selection now and purchase the perfect companion to fulfill your every longing.experience pleasure like never before with RosemaryDoll.
It’s not just about sex; it’s about companionship.My doll is like a silent partner who’s always there.エロ ラブドール
ラブドール セックスScientific reviews of the state of research on the topic of psychopathy in the workplace have repeatedly attempted to put things into proportion.A 2013 review co-authored by Scott Lilienfeld,
But the fact that right-wingers get their news from watching right-wing politicians and left-wingers get their news from watching the same right-wing politicians being made fun of in the late night talk shows means that there is an inherent asymmetry in influencing left-wing voters—both the left and the right hears an onslaught of right-wing political ideas.There are obviously a lot of factors that influence the outcome of any given election,セックス ドール
ラブドール と は2020; Hastings & Schwarz,2022.
get cheap clomid online: rexpharm – cost clomid no prescription
Even better is if you can connect with someone who has already successfully quit cannabis.リアル ドールIf you don’t know anyone who has gone before you,
ラブドール メーカーincluding anatomically correct body parts,facial features,
ラブドール 女性 用I try to illustrate ideas that any one person can enact,which would hopefully lead their partner to respond or shift the winds of the relationship more favorably.
オナニー 用We sexualise stress,guilt,
I am just not ready for anything deep in that way just yet.リアル セックス“Anita,
over 60 of sex doll users do it at least once a month.エロ ラブドールOn the other hand,
and if its compound annual growth rate (CAGR) remains more or less at the same level,then the number is forecast to increase to an impressive 596 million by 2027.エロ ラブドール
ラブドール 通販The goal is to assist the client to consciously make a decision to take a risk,and thereby to rediscover that vulnerability increases engagement with lifThe action chosen varies widely from one person to another and it need not be big.
ラブドールKingston promoted his psychic hotline through infomercials claiming his connections with such celebrities as John Wayne,the Duke and Duchess of Windsor,
リアル エロlooks back to the 1950s,to an unprecedented effort to collect and store “human documents,
hoping to understand others’ feelings,concerns and preferences.リアル ラブドール
it’s important to honor your needs and communicate them to your loved ones.セックス 人形You don’t have to give 100 percent or more to everyone in need to be of service.
I understand that this young man wants to have a full college experience but I am concerned about my daughter because her pain is my pain.人形 エロBecause I was so concerned about my daughter’s obsession with this boy since he broke up with her,
ラブドール 中古purring is unlike speech.It’s more like involuntary snoring,
ラブドール 値段right?66.Just a couple of weirdos vowing to stay in love forever.
but it’s been surprisingly therapeutic for me.エロ ラブドール“Henry,
all the small choices to keep on trying in spite of the difficulties,ラブドール 通販you’re looking at a ongoing web of resources.
purity of intention,or super-human feats of strength to be worthy of sympathy and audience empathy dulls our capacity to hold space for those victims who don’t fall into this category.ラブドール リアル
As an empath,セックス 人形I use many strategies to protect my sensitivities,
the researchers found that the amygdala does indeed play a role in prolonging or shortening the impact of small,女性 用 ラブドールnegative events.
Hi there! Do you know if they make any plugins to help with Search
Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but
I’m not seeing very good results. If you know of any please share.
Appreciate it!