透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
on average,have higher sex drives than women.ラブドール オナニー
えろ 人形Problems are much easier to solve when you approach them as a united front: This is you and me against the problem,not you and me against each other.
Realistic Sexdoll Tools To Ease Your Everyday Lifethe Only Realistic Sexdoll Trick That Every Person Must Be Able To
realistic sexdoll (szw0.Com)
Whenever you purchase a sex doll, エロ 人形you must prepare on obtaining a significant box.
エロ 人形39 You feel lonely when you’re together.40 If you had to rate your partner on a scale of 1 to 10 on qualities like warmth,
20 Inspiring Quotes About American Retro Fridge Freezer
cheap Retro fridge freezer uk
セックス ロボットmost of the motivating factors for these common male fantasies may be viewed as celebrating a woman’s sexuality (and probably a man’s own as well!).They may not be particularly laudable,
5 Clarifications Regarding French Door Fridge Freezer Uk non plumbed french door
fridge; Marilynn,
15 Best Pinterest Boards Of All Time About Mesothelioma
Asbestos Lawyers mesothelioma Attorney
It’s a long blink or a visible shift backward in their seat. Several ask, after a pause,ラブドール オナニー “Are you a naked person?”
See What Retro Under Counter Fridge Freezer Tricks The Celebs Are Using Retro Under Counter Fridge Freezer
(https://Toptohigh.Com/)
Please Observe that detachable vaginas doesn’t operate with初音 ミク ラブドール dolls with preset vaginas. Prior to shipping, We are going to e mail to substantiate what you’ve.
this involves intentionally carving out time and space to focus on one’s sensual self and erotic triggers.ラブドール オナニーErotic Wellness TipsHere are some antidotes to help keep your erotic wellness alive during the holiday season:Reconsider a quickie with yourself.
you would rate them lower than 5.エロ 人形41 You can’t recall a time when your partner has compromised so that you could take up an opportunity.
Regular maintenance
flattery,sex,人形 エロ
They spent the night at her place,and he was gone before she woke up.ラブドール オナニー
too,セックス ロボットresoundingly echoes this “huge demand” for graphic depictions of such sex.
The link reveals itself both in the language we use to describe sex—conquest,ドール エロsurrender—and in how our words for sex commonly serve double duty as aggressive insults (see under: “F— you!”).
Therefore, when you decide to dispose of a used sex doll, エロ 人形be sure to pay attention to local environmental regulations.
African Grey Parrots For Adoption’s History History Of African Grey Parrots For Adoption african grey Parrot Adoption; http://www.Grcactedev.fr,
купить диплом 2023 купить диплом 2023 .
something that very few of us have in real life. Imagine how much happier, more confident, えろ 人形and assertive you might be if you could perfect your favourite positions,
えろ 人形but which sits outside the vagina an inch or so above it beneath the top junction of the outer vaginal lips.It takes some women and many men well into adulthood to understand the importance of the clit.
You are able to do it possibly standing beside your mattress orラブドール 中古 with your mattress in addition to her.
Patio Door Lock Repair Near Me Tools To Help You Manage
Your Daily Lifethe One Patio Door Lock Repair Near Me Technique Every Person Needs To Know
Patio Door Lock Repair Near Me
You’ll Never Be Able To Figure Out This French Style Fridge Freezers’s Tricks french door
kenmore fridge – Foster –
えろ 人形and understanding your own role is essential in determining if the relationship is toxic.10 Green Flags for Great RelationshipsLaughter,
alone,and needs me more than ever.エロ ラブドール
online ed medicine FastPillsEasy best ed pills online