透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
Whether you are a seasoned experimenter and always up for trying new things,えろ 人形or are just starting out on your journey,
Dogs,especially,ラブドール 中古
While many mistakenly believe vaginal douching 人形エロhelps maintain cleanliness after sex, it’s strongly advised against.
The pandemic has changed many aspects of our social and dating life, but it人形 エロ’s also impacted how much we interact with other people.
In certain situations, individuals may experience dissatisfaction 人形エロwith their sexual partners due to perceived low interest or an inability to meet specific preferences.
That said, there are a few tips (OK, a lot!) that we can share to えろ 人形help you extract the maximum level of toe-curling pleasure from your doll,
ラブドール エロUnder the guise of giving him helpful feedback,she tells him that he is drawing too much attention to himself.
One element though is less obvious and often more elusive and that’s touch.人形 エロ At first glance, touch might not seem like it would be as vital as say food or water,
whether you’re popping your cherry and having sex with a doll for the first time or are just lookingえろ 人形 for a few new tips and tricks to keep things feeling fresh and exciting.
looked at me and looked at the carcass,ラブドール 販売and then went back to the carcass and touched it lightly with her forepaws.
male sex dolls make the perfect partner on your journey of discoveryえろ 人形.
we have not gotten over the blonde bombshell.One reason she is so appealing is that she is more than a historical figure.人形 エロ
Douching may cause problems, including infections, 人形エロpelvic inflammatory disease (PID), and complications during pregnancy.
ラブドール セックスSome people who struggle with impostor phenomenon report a fear of being “found out”—as if their hard work and qualifications were falsified or unearned—hence,they feel like “impostors.
which adds to the complexity of the mysteries of the feline mind.ラブドール 中古There is no doubt that dogs can learn that words spoken by humans may contain instructions for certain behaviors that they are requested to do.
If you’re looking for companionship from your doll,えろ 人形you might enjoy the process of dressing your doll,
Individuals who find themselves without a sexual partner 人形エロfor an extended duration often find solace in the companionship of silicone love dolls.
At its core the book is about connection … how we connect with dogs tells us something about how we connect with one another.ダッチワイフ エロDogland looks at the whole history of humans’ relationship with dogs,
セックス ドールParticipants knew full well that this information was retracted,but they still used it in their reasoning.
Just think about it – according to statistics,リアル セックスone in 10 men in the US owns a sex doll.
But what really blew me away was their エロ 人形outstanding customization service.
A premium male sex doll will give you the freedom to stand against a wallえろ 人形 for example, position on a flat surface such as a bed, on a chair or even in the shower.
to live out your most taboo desires and to get as えろ 人形imaginative as you want without taking your partner’s feelingsor preferences into account.
Some books are about the art of competing in dog shows,ダッチワイフ エロother books are about the science of dog behavior,
Having innate confidence in your sexual prowess isn’t a えろ 人形given for many of us.
kindness,and dignity.ダッチワイフ エロ
The last thing is simply to be aware of how you store your doll so it doesn’t get damaged or dentedえろ 人形.
Even just a quick five or 10 minute clean which sees you remove the anal and mouth sleeves and えろ 人形detachable penis and wash with a water-based toy cleaner will help to prolong the life of your doll,
When you’re just beginning to date, it can be hard to bring up your deepest, えろ 人形hottest, most out there fantasies, desires and tastes. Everyone fears rejection and the
Additionally, they’re highly-praised by the doll community, エロ 人形including The Doll For