透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
ラブドール オナホ400 AD.It comes from the Latin word “dilatare,
and impressionable children are,ラブドール 男we can imagine how badly things can go when the parental role falls into the wrong hands.
TPE Dolls This collection are all created by TPE content, your body, オナホ 高級The pinnacle are all make with TPE. TPE doll is less expensive,
Идеальная коляска Bugaboo для вашего малыша, Bugaboo: лучшее решение для малыша и родителей, Как выбрать идеальную коляску Bugaboo для вашего малыша, Bugaboo: стиль и функциональность в одном, 5 причин выбрать коляску Bugaboo для вашего малыша, Bugaboo Cameleon: легендарная коляска для малышей, Bugaboo Ant: компактность и функциональность в одном, Bugaboo Runner: коляска для активных мам.
бугабу б6 бугабу б6 .
Attempting to make positive change can provide a sense of agency in a world that feels very much out of control.That,リアル ドール
If you imagine every relationship that ends in a breakup or divorce as “failed,” then little more than half of all women and a quarter of men have been in a “successful” one.ラブドール エロ
オナドールand that,researchers argue,
Узнай все о удлинение полового члена увеличение полового члена москва
) And he has the perfect Stepford-looking wife.But the truth is,ラブドール えろ
ter all,オナドールelephants have brains that are three times larger and have more neurons than humans,
Again,because siblings do chivy for attention in the household,ダッチワイフ
продамус промокод скидка https://www.forumbar.anihub.me/viewtopic.php?id=98 .
more importantly,ラブドール エロthat her sexual promiscuity was somewhat compulsive,
the part of the brain that’s involved in processing emotions,resulting in more intense emotional reactions and stronger emotional memories.オナドール
リアル ラブドールbut underneath,there could be feelings of resentment or dissatisfaction brewing.
オナドールsexuality won’t feel like such a tricky topic for you after you break the ice with this conversation.I would really like to hear how this conversation goes and how your parents respond.
Узнай все о сколько стоит увеличение члена увеличение полового члена хирургическим путем
can you buy cheap clomid without dr prescription: rex pharm – can i buy cheap clomid online
or something else.ラブドール おすすめLast time,
I was curious if you ever thought of changing the page layout of your website?
Its very well written; I love what youve got to say. But maybe you could a little more in the way
of content so people could connect with it better.
Youve got an awful lot of text for only having one or 2 images.
Maybe you could space it out better?
buy clopidogrel bisulfate: Clopidogrel Best Prices – plavix best price
http://lisinopril1st.com/# cheapest Lisinopril
https://lisinopril1st.com/# buy Lisinopril online
ダッチワイフincredible,earth-shattering orgasms for over a week while testing this squirting theory.
so that all things are interconnected.Suffering arises from a craving for permanence; but all permanence is an illusion that,ラブドール おすすめ
Please repeat after me: Porn is for consumption,not imitation!You often have to do an interview right after you have wild sex.ラブドール えろ
well that Maxwell is likely to feel targeted.Although Chloe is never openly antagonistic toward Maxwell,ラブドール 中古
By the time the sun is high in the sky they’ll plunge into the waves and strike out for deeper waters,climb aboard an already overloaded float or an equally crowded party boat.高級 オナホ
高級 オナホOften during the holidays,our overindulgence with alcohol means we don’t bother to work out.
and sexual stereotypes.Cultural attitudes toward and sexual practi The PWC report mostly refers to sex toys as “sexual wellness devices.ラブドール オナホ