透過網頁讀取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": []
}
}
}
BBgate MarketPlace 2024 Breaking Bad Gate Forum
BBgate MarketPlace
Как купить диплом о высшем образовании с минимальными рисками
Как правильно купить диплом колледжа и пту в России, подводные камни
prednisone pills 10 mg: prednisone ray pharm – prednisone prices
промокод на робокасса скидка подключение http://www.promokod-robokassa.ru .
робокасса промокод скидка робокасса промокод скидка .
Купить диплом экономиста – оптимальное решение
Как получить диплом техникума с упрощенным обучением в Москве официально
Купить диплом экономиста – оптимальное решение
Как правильно приобрести диплом колледжа или ПТУ в России, важные моменты
Полезная информация как официально купить диплом о высшем образовании
Top Apps to Make Money in Pakistan, For Extra Income, Unusual Ways to Make Money in Pakistan, For Quick Earnings, The most effective applications for earning money in Pakistan, Facts about earning money in Pakistan through mobile applications, which you need to know, with a guarantee of payments, How to make money, without leaving home in Pakistan, Simple ways to make money in Pakistan through mobile apps, Successful ways to make money in Pakistan, Promising apps for making money in Pakistan, for making money in your free time, Innovative platforms for making money in Pakistan, which will suit every user, Popular apps for making money in Pakistan: choose the best, which bring real money, Top ways to earn money in Pakistan through apps: tips andhow to earn money online in pakistan for students free earning app in pakistan .
Play on Mostbet and win big every day | Mostbet offers great odds for sports betting | Access exclusive bonuses with Mostbet registration | Experience the thrill of live betting with Mostbet | Enjoy 24/7 customer support on Mostbet Bangladesh | Discover exciting offers on Mostbet Bangladesh | Access live scores and updates on Mostbet online http://www.mostbetbangladeshbd.com.
get generic clomid without rx: how to buy clomid online – where can i get cheap clomid pills
Стоимость дипломов высшего и среднего образования и как избежать подделок
Легальная покупка диплома ПТУ с сокращенной программой обучения
Купить диплом в России, предлагает наша компания
Как получить диплом техникума с упрощенным обучением в Москве официально
armit.ru/social/user/42552/forum/message/1800/1802/#message1802
Сколько стоит получить диплом высшего и среднего образования легально?
Полезные советы по безопасной покупке диплома о высшем образовании
Как правильно приобрести диплом колледжа или ПТУ в России, важные моменты
Стоимость дипломов высшего и среднего образования и процесс их получения
Официальная покупка школьного аттестата с упрощенным обучением в Москве
Можно ли быстро купить диплом старого образца и в чем подвох?
Сколько стоит получить диплом высшего и среднего образования легально?
[url=https://ses-moskva-sanepidemstantsiya.ru/] порно младше смотреть [/url]
and .
Покупка диплома о среднем полном образовании: как избежать мошенничества?
where to buy prednisone without prescription: prednisone – generic prednisone otc
Сколько стоит диплом высшего и среднего образования и как его получить?
Hi there! Do you know if they make any plugins to safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any tips?
online casinos