透過網頁讀取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": []
}
}
}
Amo Health Care: Amo Health Care – can i purchase amoxicillin online
My homepage – online dating chat rooms
order cheap clomid without prescription: Clom Health – how to get generic clomid without a prescription
Amo Health Care amoxicillin pills 500 mg Amo Health Care
Check out my page: high Stakes poker player
Amo Health Care Amo Health Care Amo Health Care
Here, find a variety virtual gambling platforms.
Whether you’re looking for well-known titles new slot machines, there’s a choice to suit all preferences.
All featured casinos checked thoroughly for safety, so you can play with confidence.
play slots
What’s more, the platform provides special rewards and deals targeted at first-timers as well as regulars.
With easy navigation, finding your favorite casino takes just moments, saving you time.
Stay updated on recent updates through regular check-ins, as fresh options are added regularly.
Here is my blog post … Explore Daycares Locations
https://amohealthcare.store/# amoxicillin 1000 mg capsule
Also visit my homepage; High stack poker
can i purchase clomid without prescription: can i purchase cheap clomid prices – can i purchase clomid price
PredniHealth: can you buy prednisone without a prescription – prednisone cost canada
how much is prednisone 10 mg: buy prednisone from india – PredniHealth
buy amoxicillin 500mg canada: Amo Health Care – Amo Health Care
Amo Health Care: Amo Health Care – Amo Health Care
https://prednihealth.com/# PredniHealth
Feel free to surf to my web-site – watch Free poker Videos
helpful hints keplr wallet
https://amohealthcare.store/# can you buy amoxicillin uk
https://prednihealth.com/# PredniHealth
Thanks for sharing excellent informations. Your site is very cool. I’m impressed by the details that you?ve on this web site. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for extra articles. You, my pal, ROCK! I found just the info I already searched all over the place and simply could not come across. What an ideal web-site.
you could look here keplr Extension
prednisone 5mg price: PredniHealth – prednisone daily
buy amoxil Amo Health Care Amo Health Care
prednisone prescription drug: prednisone 10mg online – 20 mg prednisone
https://clomhealth.shop/# order generic clomid prices
can i purchase generic clomid cost of clomid without a prescription can i order generic clomid without dr prescription
over the counter prednisone cream: 15 mg prednisone daily – PredniHealth
buy generic clomid pill: how to get cheap clomid for sale – buy generic clomid no prescription
prednisone price australia: PredniHealth – PredniHealth