透過網頁讀取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": []
}
}
}
online casino play for real money
us online casino
best casino sites
pain meds online without doctor prescription carprofen without vet prescription
bester online casino bonus
mobile casino sites
best welcome bonus casino
https://medrxfast.com/# pet antibiotics without vet prescription
win money online
online casino review
play mobile casino
flagyl 400mg sale buy metronidazole 400mg without prescription cost glucophage
buy a vpn uk
hola vpn download free
vpn app
express vpn free windows
best vpn for roku
best rated vpn 2018
https://medrxfast.com/# non prescription ed pills
Thanks for some other great post. Where else may anybody get that kind of information in such an ideal method of writing? I’ve a presentation next week, and I am at the look for such information.
Provided to YouTube by Netd Müzik Video Dijital Platform A.Ş.İnkar Etme (Versiyon 1)
Gökhan Özen Gökhan Özen Deniz Erten Gökhan Özen Gökhan ÖzenRes.
https://medrxfast.com/# canadian medications
best vpn for routers
best rated vpn
how to set up vpn
prescription drugs online without doctor ed meds online canada
Yolcu ve çalışan temas noktalarında Covid-19 önlemlerini değerlendirmek için yapılan kapsamlı denetimde, airBaltic hizmet
ve prosedürlerinin yanı sıra Havaş’ın sunduğu check-in,
yolcu kabul, kabin dezenfeksiyon hizmetleri ile TAV
İşletme.
Some truly interesting info , well written and broadly user genial .
what is the best online casino for real money
mobile online casinos
real money casino no deposit
I am very happy to look your post. Thanks a lot and i am taking a look ahead to touch you.
canadian online drugs cvs prescription prices without insurance
online casino bonuses
free money no deposit
free welcome bonus no deposit required
flagyl 400mg cheap augmentin oral order glucophage pill
metronidazole 200mg cost augmentin 1000mg generic glucophage pill
canadian drugs ed meds online without prescription or membership
casino no deposit bonus win real money usa
casino signup bonus
no deposit bonuses
best vpn wirecutter
vpn service
vpn for windows free download
https://medrxfast.com/# buy prescription drugs from canada cheap
comfortis for dogs without vet prescription anti fungal pills without prescription
https://medrxfast.com/# sildenafil without a doctor’s prescription
oral zithromax 500mg purchase zithromax brand glucophage 500mg
best free vpn reddit 2022
vpn software
avg vpn