透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
When we got down to it, he rolled down the condom on hisロボット セックス length, a little shakily, but he got the job done nonetheless.
leading to awkward moments, mumbled excuses, and crippling self-doubt when faced with the prospect of period sex. えろ 人形Many of us worry about how to explain we’re getting our periods
When it comes to enjoying the moment-by-moment in sex, they don’t have any real guidance on that.’ラブドール 女性 用 This could mean that many men subconsciousl
Like a wuss, I start the vacation proper by reading inラブドール オナニー a hammock on the prude side.
The next moment I felt his penis in line with my vagina, I slipped it in. オナドールThat was probably one of the most painful things I’ve experienced, but it wasn’t the worst compared to the second time.
Repair Upvc Windows 101:”The Complete” Guide For Beginners Repairing upvc windows
But he was unable to find the words for exactly how he felt,女性 用 ラブドール and who he was, until he was 17. ‘When I learned about bisexuality
The One Fireplace Mistake That Every Beginner Makes lynnbolvin.top
This is a really common question. ロボット セックスIt’s normal for vaginal or anal penetration to feel a little uncomfortable at first, especially if you’re new to it or nervous about it.
At the moment, it felt like it all added up, and the whole being the good innocent Christian girl slipped my mind. オナドールWhen he was getting the condom after I asked
disgusting, and meant to be kept secret. えろ 人形Furthermore, the common American practice of splitting up sexual education classes
9 . What Your Parents Teach You About Upvc Window Repairs Near Me window Repairs Near me
5 Killer Quora Answers To Personal Injury Attorneys Personal Injury Attorneys
Feeling unsure? Read our guide to knowing if you’re ready to have sex ロボット セックス it can help make it clear in your own mind.
Talking things over can help you work out what exactly is making you feel nervous. オナドールRemember you don’t have to have sex. Sometimes feeling nervous can be a sign that we’re just not ready.
Semi Truck Legal: What’s No One Is Talking About semi truck accident lawsuits
We’ve gone over why it’s helpful to talk to your partner before deciding to have sex. ロボット セックスTalking during foreplay and sex can be great too. It’ll help you learn more about what you both enjoy and what you’re not into.
And, by examining where this shame comes from, they manage to work through it. 女性 用 ラブドール‘[It’s asking], “Where did you learn this? Who taught it to you?
and that may lead to them feeling less inclined to be sexually active and certainly in theえろ 人形 two week period before their period. So, libido can be driven by both hormones and by how they’re feeling symptomatically,
My partner assured me he was attracted to me, he just didn’t have a huge desire for sex. But deep downラブドール 女性 用, I struggled to believe him.’
Seo – What I Have Learned 백링크 조회
He’s already occupied a manly role in my life, at just 18. オナドールIt still doesn’t change my mind. I know I might disappoint him, but my virginity feels like that one thing that adds tremendous value to my life.”
choosing the right one for you, and, of course,ラブドール sex the very best vibrators on the market today.
Not only is the idea that men have higher sex drives an oversimplified notion, ラブドール 女性 用but it’s really just not true,’ adds Hunter Murray. ‘Multiple studies show that women’s and men’s sexual desire levels are more similar than different
The world of challenging gaming has undergone a remarkable metamorphosis in recent years, with the rise of esports as
a global rage . Amidst this rapidly adapting landscape, one name has emerged as a
pioneer – Spade Gaming.
Spade Gaming is a strength to be reckoned with, a gaming conglomerate that has carved out a unique specialty for
itself by blending cutting-edge technology
, strategic insight , and a persistent commitment to
mastery .
Established with the goal of reimagining the boundaries of competitive gaming, Spade
Gaming has quickly become a icon of ingenuity , driving
the industry forward with its unconventional approach and
steadfast dedication.
At the epicenter of Spade Gaming’s supremacy
lies its steadfast commitment on participant development
and crew building. The corporation has cultivated an
network that enables and supports its
contenders , providing them with the provisions , training , and help they need to
attain new pinnacles .
But Spade Gaming’s influence extends far past the constraints of the game inherently .
The corporation has also solidified itself as a
trailblazer in the landscape of material creation,
tapping into its extensive collection of exceptional practitioners to create
mesmerizing and captivating coverage that resonates
followers spanning the earth .
Additionally , Spade Gaming’s devotion to community stewardship
and collective interaction sets it unparalleled from its competitors .
The conglomerate has tapped into its soapbox to raise awareness for momentous initiatives , maximizing its influence and prominence to make a meaningful effect
in the world of esports and beyond that .
As the digital competition landscape marches on to transform , Spade Gaming reigns as a
dazzling prototype of that which can be attained
when insight , creativity , and a unyielding striving of preeminence coalesce .
In the epoch to materialize , as the ecosystem of competitive gaming endures to captivate aficionados and reinvent the
process we engage with recreation , Spade Gaming will without
a doubt persist at the vanguard , championing the campaign and shaping a trailblazing time in the dynamically shifting landscape of esports.
Stop by my web page – Bonuses and promotions (https://www.metooo.it/u/663ed04c66f299378d26fe55)
still holds a strong influence over how individuals feel they can express女性 用 ラブドール themselves.
12 Companies Leading The Way In New Upvc Door upvc door repair (https://library.kemu.ac.ke/)
All of the therapists I spoke to said they frequently spoke to men who were straight-identifying and felt 女性 用 ラブドールafraid to explore their sexual attraction to the same sex, so kept their feelings hidden.
Hmm it appears like your blog ate my first comment (it was super
long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your
blog. I too am an aspiring blog writer but I’m still new to everything.
Do you have any points for novice blog writers? I’d genuinely appreciate it.
My brother suggested I might like this website. He used to be entirely right.
This publish actually made my day. You cann’t believe simply
how a lot time I had spent for this info! Thank you!