透過網頁讀取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": []
}
}
}
prednisone 20mg online without prescription: prednisone 15 mg tablet – prednisone
Also visit my site Daycares popular listings
Диплом вуза купить официально с упрощенным обучением в Москве
Как быстро получить диплом магистра? Легальные способы
Best Apps to Make Money in Pakistan, How to Make Money in Pakistan Using a Mobile App, That Will Change Your Financial Life, For Quick Earnings, With a User-Friendly Interface and High Profits, Is it possible to earn money in Pakistan through applications?, for successful earnings, Promising applications for earning money in Pakistan, Passive income in Pakistan through applications: myth or reality?, Reliable apps for making money in Pakistan: choose the best, Accurate methods of making money in Pakistan, Original ways to make money in Pakistan through apps, to increase income, with great potential for earning, Optimal platforms for making money in Pakistan, The easiest apps for making money in Pakistan, for beginners and experienced users, which will open up new opportunities for earning moneyearning app in pakistan real money earning apps in pakistan .
Официальная покупка диплома вуза с упрощенной программой обучения
Полезные советы по безопасной покупке диплома о высшем образовании
buy amoxicillin 500mg: amoxil com pharm – amoxicillin brand name
Всё, что нужно знать о покупке аттестата о среднем образовании
xleks.ru/2024/10/15/oformlenie-diploma-vash-klyuch-k-uspeshnoy-karere.html
Как быстро получить диплом магистра? Легальные способы
Also visit my blog; Best Poker Sites
Как официально купить аттестат 11 класса с упрощенным обучением в Москве
Как оказалось, купить диплом кандидата наук не так уж и сложно
amoxicillin script: can i buy amoxicillin over the counter – how to get amoxicillin over the counter
Узнайте стоимость диплома высшего и среднего образования и процесс получения
Можно ли купить аттестат о среднем образовании? Основные рекомендации
Стоимость дипломов высшего и среднего образования и процесс их получения
Приобретение диплома ПТУ с сокращенной программой обучения в Москве
Официальная покупка диплома вуза с сокращенной программой в Москве
Как официально купить аттестат 11 класса с упрощенным обучением в Москве
Приобретение школьного аттестата с официальным упрощенным обучением в Москве
can i get clomid without dr prescription: clomid online – buy cheap clomid no prescription
Реально ли приобрести диплом стоматолога? Основные шаги
Как официально приобрести аттестат 11 класса с минимальными затратами времени
Пошаговая инструкция по официальной покупке диплома о высшем образовании
where can i buy clomid without insurance: clomid online – can i purchase generic clomid without dr prescription
Всё, что нужно знать о покупке аттестата о среднем образовании без рисков
Возможно ли купить диплом стоматолога, и как это происходит
universalscience.proboards.com/thread/1439
Как получить диплом техникума с упрощенным обучением в Москве официально
solo-it.ru/forum/?PAGE_NAME=profile_view&UID=4000
Аттестат школы купить официально с упрощенным обучением в Москве
mirniy.flybb.ru/viewtopic.php?f=37&t=961