透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
オナホ 高級or sexual activities involving participants of more than one gender.We focused on this type of threesome because it is the most common variation,
ラブドール エロThe joints are expertly designed to move smoothly,com’s customer service is exceptional,
ラブドール えろThe site allows you to personalize almost every aspect of your doll,from the color and texture of the skin to the style,
as opposed to when a woman has cheated.オナホ 新作Men can and do cheat on a good relationship,
For example,女性 用 ラブドールthose who spend less might see the act of marriage itself (and not the fancy things that often go along with weddings) as the ultimate expression of their love.
In this post,we’re going to take a deep dive into the psychology behind this sexual interest.リアル ラブドール
ラブドール オナニーprevious studies have found that the gap is even wider in male-dominated cultures.This is likely due to the emphasis on sexual prowess and virility in male-dominated cultures.
リアル ラブドールmonth-to-month busy calendar.People have work,
ラブドール オナニーthat they love their significant other,that their sex life is great,
then what’s motivating people to be unfaithful?Are Mothers Happier With One Child or More?.ラブドール 高級.. and does the benefit only kick in when kids move out?Natural selection is about getting our genes into babies.The boost in happiness dissipates a few years after having a child.Time pressures associated with second births explain the worsening mental health of mothers; fathers don’t suffer that fate.Parents are happiest when their children leave home.Recently,
ラブドールcombined with your logical structure,made the article exceptionally accessible and informative.
リアル ラブドールtheir preconceived notions of what a person of color talks like,acts like,
ラブドールwhich I find extremely valuable.I’ve already started implementing some of your tips,
The blog also features guest posts and interviews with experts,adding diverse perspectives and enriching the content.ラブドール エロ
リアル ラブドールIn cuckolding,a common fantasy element involves a white wife being sexual with a man of color,
combined with your focus on actionable recommendations,Your suggestions for [specific problem or strategy] were not only well-founded but also easy to implement,ダッチワイフ
we can’t just look at what college students are doing.Young adults are less interested in and experienced with threesomes,女性 用 ラブドール
オナホ 新作and relationships are relationships,and the two do not necessarily overlap.
If the sexual narcissist is unwilling to accept responsibility for their actions and work on the relationship,オナホ 高級the next best thing to do would be to develop a safety plan for yourself.
リアル ラブドール000 to $75,000 a year,
Research shows that women who use vibrators have more orgasms,エロ ラブドールboth alone and with partners.
ドール アダルトyou’ll see a promise for a third post; despite the large delay between those blogs and this one,the close of May 2021 is ideal for self-pleasure tips.
Оборудование актовых залов oborudovanie-aktovogo-zala.ru .
It’s evident why JP-Dolls is so highly praised.and a smooth buying process makes JP-Dolls the pinnacle of realism.ラブドール エロ
It seems counterintuitive that they will develop into long-term serious romantic relationships.The very term,ラブドール 販売
ラブドールThe way you addressed potential counterarguments and provided well-reasoned responses added credibility and robustness to your analysis.Your detailed exploration of [specific issue] was particularly enlightening,
The site’s easy navigation made the customization experience both straightforward and enjoyable.com has truly set new standards in doll realism,ラブドール えろ
ラブドール えろand knowledgeable support throughout the process.The site’s user-friendly interface made the customization experience seamless and enjoyable.
ラブドール えろensuring both durability and an authentic feel.The joints are designed to move fluidly,
Women in this study also addressed the authenticity of porn based on the inclusion of LGBTQ persons and people from diverse races.ダッチワイフ エロHowever,