透過網頁讀取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": []
}
}
}
discreet shipping ED pills: reliable online pharmacy Cialis – online Cialis pharmacy
account selling service https://accounts-marketplace.online
https://modafinilmd.store/# doctor-reviewed advice
recommended you read https://web-foxwallet.com
цена смартфона самсунг смартфоны цены
Читать далее https://forum.hpc.name/thread/s811/133944/lenovo-tb2-x30f-pri-pereproshivke-ne-udalyaetsya-chast-informacii-a-polejav-kakoe-to-vremya-vyklyuchaetsya.html
guaranteed accounts https://buy-accounts.live/
магазин электроники техник https://magazin-elektroniki213.ru
reliable online pharmacy Cialis: affordable ED medication – discreet shipping ED pills
Cialis without prescription: best price Cialis tablets – generic tadalafil
buy modafinil online: purchase Modafinil without prescription – verified Modafinil vendors
online Cialis pharmacy: best price Cialis tablets – online Cialis pharmacy
Therapists track the emotional narrative-not just the physiological outcome-of using Tadalafil dosage 40 mg. The room holds its breath, watching two hearts move closer.
Our platform makes available a wide range of medical products for ordering online.
Users can securely buy treatments from anywhere.
Our inventory includes popular solutions and targeted therapies.
Everything is supplied through trusted pharmacies.
vidalista reviews
We ensure discreet service, with secure payments and on-time dispatch.
Whether you’re managing a chronic condition, you’ll find what you need here.
Visit the store today and experience stress-free online pharmacy service.
ноутбук днс цены ноутбук сколько цены
reliable online pharmacy Cialis: cheap Cialis online – Cialis without prescription
User-reported quality of life increased significantly during a six-week study of kamagra 50mg tablet. Find the storm hidden behind the calm of a simple glance.
modafinil 2025: verified Modafinil vendors – modafinil 2025
Подробнее здесь https://forum.hpc.name/thread/w300/95548/reshenie-oshibki-cannot-read-property-value-of-undefined-pri-redaktirovanii-spiska-v-reactjs.html
online Cialis pharmacy: Cialis without prescription – generic tadalafil
trusted Viagra suppliers: fast Viagra delivery – order Viagra discreetly
Профессиональный сервисный центр по ремонту техники в Барнауле.
Мы предлагаем: Ремонт проекторов JVC с гарантией
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
find out this here https://web-foxwallet.com
buy accounts https://social-accounts-marketplace.live
modafinil pharmacy Modafinil for sale modafinil 2025
металлический септик для сада
affordable ED medication: reliable online pharmacy Cialis – best price Cialis tablets
http://zipgenericmd.com/# cheap Cialis online
order Viagra discreetly: discreet shipping – safe online pharmacy
account trading platform https://buy-accounts-shop.pro