透過網頁讀取Photoshop PSD檔案內容
在專案中有需要透過網頁來讀取Photoshop PSD檔案的內部資訊，我們透過PSD.js（備用載點）來實現這樣的功能，在官方提供的功能展示頁中，我們可以看到在頁面中只需引入psd.min.js後，加入透過少量的Javascript就可以針對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 here</p>
</div>
<div id="image"></div>
<pre id="data"></pre>
<script type="text/javascript">
(function () {
var 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) {
var data = JSON.stringify(psd.tree().export(), undefined, 2);
document.getElementById('data').innerHTML = data;
document.getElementById('image').appendChild(psd.image.toPng());
});
}
}());
</script>
</body>
</html>
我們透過下圖這樣的一個PSD檔案對頁面進行測試，檔案中共有三個圖層，包含一個文字圖層。
頁面將PSD分析出結果後，以json格式顯示在頁面上，可以看到文字圖層的部分，不僅能讀到圖層名稱也包含文字內容和字型名稱。
{
"children": [
{
"type": "layer",
"visible": true,
"opacity": 1,
"blendingMode": "normal",
"name": "Photoshop Text",
"left": 302,
"right": 723,
"top": 90,
"bottom": 128,
"height": 38,
"width": 421,
"mask": {},
"text": {
"value": "THIS IS TEXT LAYER",
"font": {
"name": "MyriadPro-Regular\u0000",
"sizes": [
53
],
"colors": [
[
0,
0,
0,
255
]
],
"alignment": [
"center"
]
},
"left": 0,
"top": 0,
"right": 0,
"bottom": 0,
"transform": {
"xx": 1,
"xy": 0,
"yx": 0,
"yy": 1,
"tx": 513,
"ty": 127
}
},
"image": {}
},
{
"type": "layer",
"visible": true,
"opacity": 1,
"blendingMode": "normal",
"name": "PSD Icon",
"left": 287,
"right": 738,
"top": 209,
"bottom": 669,
"height": 460,
"width": 451,
"mask": {},
"image": {}
},
{
"type": "layer",
"visible": true,
"opacity": 1,
"blendingMode": "normal",
"name": "Background",
"left": 0,
"right": 1024,
"top": 0,
"bottom": 800,
"height": 800,
"width": 1024,
"mask": {},
"image": {}
}
],
"document": {
"width": 1024,
"height": 800,
"resources": {
"layerComps": [],
"guides": [],
"slices": []
}
}
}
https://clomhealth.com/# can i order generic clomid without insurance
prednisone 5 50mg tablet price: prednisone where can i buy – PredniHealth
buy amoxicillin canada: Amo Health Care – Amo Health Care
What?s Happening i’m new to this, I stumbled upon this I have found It absolutely useful and it has helped me out loads. I hope to contribute & help other users like its helped me. Great job.
cost generic clomid without a prescription: get generic clomid now – can i order generic clomid without insurance
PredniHealth prednisone 20mg online PredniHealth
Resources MetaMask Download
Amo Health Care: Amo Health Care – generic amoxicillin 500mg
generic prednisone cost: PredniHealth – PredniHealth
visit this web-site coinbase login
prednisone 5443: PredniHealth – 50 mg prednisone from canada
where can i buy cheap clomid online: Clom Health – where can i buy cheap clomid without insurance
PredniHealth generic prednisone tablets prednisone 10mg cost
40 mg prednisone pill: PredniHealth – PredniHealth
click here now paycor login
how to buy cheap clomid: cost of clomid for sale – clomid without prescription
cheap clomid price: Clom Health – how can i get cheap clomid for sale
can i order clomid for sale: can i get clomid pills – how to buy cheap clomid price
Amo Health Care can you buy amoxicillin over the counter canada amoxicillin 500 tablet
https://amohealthcare.store/# amoxicillin 500 coupon
PredniHealth: prescription prednisone cost – PredniHealth
order prednisone with mastercard debit how much is prednisone 10 mg PredniHealth
Amo Health Care: amoxicillin 825 mg – amoxicillin buy canada
Плюс Banda Casino — регулярные акции и бонусы. Любимые слоты нашел именно в Banda Casino. Отличное обслуживание и поддержка на сайте Banda Casino. Регистрация на Banda Casino прошла без проблем. Приятно получить бонус при регистрации на Banda Casino. Зеркало Banda Casino работает без перебоев. Зеркало Banda Casino всегда доступно через официальные каналы. Понравилось играть на Banda Casino — много фриспинов. Нашел зеркало Banda Casino через форум — работает casino banda site.
http://clomhealth.com/# where to buy generic clomid pills
prednisone 20 mg pill: prednisone uk over the counter – prednisone prices
PredniHealth: india buy prednisone online – prednisone 40 mg
my site keplr Download
http://clomhealth.com/# buying clomid without dr prescription
https://amohealthcare.store/# Amo Health Care