透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
they have no intention of ending their primary relationship.オナホ 新作Women are less likely to operate that way.
a Polish magazine reprinted many of my Psychology Today blog posts.オナホ 新作Many participants cited new relationships as the reason for their late-life sexual awakenings:“Single at 58,
Biological factors include things like hormones and physical health.Psychological factors include things like mental health and self-esteem.ラブドール オナニー
Responses were given on a Likert-type scalThe second part of the study was a vignette experiment in which different descriptions of relationships that included higher or lower expectancies of experiencing pleasure outside of and emotional closeness were described.Participants were asked to read the vignettes and imagine how much they would be interested in engaging in sexual activity in these contexts on a 6-point scale (with 1 being “extremely unlikely” to 6 being “extremely likely”).ダッチワイフ エロ
Interactive Slots Tips To Relax Your Daily Life Interactive Slots Trick
Every Individual Should Learn interactive Slots
and pleasurablDespite this,エロ ラブドールfor many masturbation remains guilt-ridden.
The Top Companies Not To Be Keep An Eye On In The Honda Keys Cut And Program
Industry Honda jazz key cover
オナホ 新作We didn’t know anything when we were young.Sex is beautiful now.
Inclusion criteria were that all articles were written in English and the title and abstract had to contain a reference to first sexual experience and sexual pleasure.エロ ラブドールThe final sample included 23 papers that were quantitative (n = 16),
オナホ 新作life-altering investment: pregnancy,nursing,
10 Tips To Build Your Coffee Pods Coffee Machine Empire coffee pods Machine
Three Greatest Moments In Rollator For Tall Person History rollator Wheelchair combo uk
old dogs can learn new tricks—and enjoy them.オナホ 新作Men are generally more likely than women to be able to compartmentalize sex and intimate connections.
The Best Tips You’ll Receive About Glass Window Repair installers
Hey there I am so delighted I found your web site,
I really found you by error, while I was looking on Yahoo for something else, Anyways I am here now and would just like to say thanks for a fantastic post and a all round thrilling blog (I also love the theme/design), I don’t have time
to read it all at the minute but I have saved it and also added your RSS feeds,
so when I have time I will be back to read a lot more, Please do keep up
the fantastic job.
女性 用 ラブドールbut they roll over and tell you they just want to go to sleep.Or you’re sitting on the couch relaxing,
オナホ 新作and good relationships are worth saving.women are more likely to cheat when their primary relationship is not going well,
so they put up with it.The women agreed that sex for greater intimacy was a romantic fantasy,ラブドール オナニー
<a href="https://www.erdoll.com/tag/siliconelovedoll.htmlラブドール 男Muscles attract attention.Both women and men take greater notice of men who look strong.
<a href="https://www.erdoll.com/tag/siliconelovedoll.htmlラブドール 男This might help you get in a more body-focused, mindful stat Alternatively,
エロ ラブドールyou need to know the parts of your vulva.If you’ve never done so,
Hi, There’s no doubt that your web site may be having
browser compatibility problems. Whenever I take a
look at your site in Safari, it looks fine however, if opening
in I.E., it’s got some overlapping issues. I merely wanted to provide you with a quick
heads up! Besides that, wonderful site!
my web blog :: Daycares popular listings; Jaimie,
How Adding A Single Bed Bunk To Your Life
Can Make All The A Difference bunk beds Two single
8 Tips To Up Your Filtered Coffee Makers Game Drip Machine Coffee
15 Top Mesothelioma Attorney Bloggers You Need To Follow
Top Mesothelioma Attorney
You really make it appear really easy along with your presentation however I find this matter to be really one thing
which I think I might by no means understand.
It kind of feels too complicated and extremely large for me.
I am taking a look forward in your subsequent submit, I’ll try to get
the hold of it!
Black coffee is an ideal beverage to drink for weight loss
because it contains less than 5 calories per serving (one 8-0z cup).
The coffee diet is just not your best option for
healthy weight loss. “I had gained some weight during lockdown and wished to discover totally different diets to assist my physique get better from inflammation associated to speedy weight gain and stress,” Cora
says. Unlike lesser strategies of making coffee, which are no more dependable than their customers and can’t be counted on to provide the same
cup twice, the Clover is outfitted with a “PID algorithm” for
regulating temperature and “programmable workflow modes” to assist micromanage the brewing process.
Abnormalities of Labor Labor is a sophisticated course of that may become difficult in several ways.
If you need the very best tomatoes out of season, there are a couple of ideas you’ll be able to try.
Who Should not Try the Sirtfood Diet? Cora, who experiences
from gastrointestinal points on account of celiac illness, noticed that her digestion improved
after eating complete foods with plenty of fiber.
Clear your kitchen of foods not allowed on the plan. A clearly
outlined plan with recipes. Recognizing this, she modified the diet and has since been incorporating the
rules with out strictly sticking to the preliminary three-week plan.
Here is my web blog Daycare Near Me – Find The Best Daycares Near You
15 Gifts For The Lightweight Folding Electric Wheelchair Uk Lover In Your Life electric lightweight foldable wheelchair