透過網頁讀取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": []
}
}
}
Gucci купить http://thebestluxurystores.ru по низкой цене в интернет-магазине брендовой одежды. Одежда и обувь бренда Gucci c доставкой.
продвижение сайтов цена в москве http://prodvizhenie-sajtov-v-moskve115.ru .
Diego Armando Maradona https://diego-maradona.com.az Argentine footballer who played as an attacking midfielder and striker. He played for the clubs Argentinos Juniors, Boca Juniors, Barcelona, ??Napoli, and Sevilla.
Welcome to the site dedicated to Michael Jordan https://michael-jordan.com.az, a basketball legend and symbol of world sports culture. Here you will find highlights, career, family and news about one of the greatest athletes of all time.
order zofran 4mg – order generic requip requip price
Совсем недавно открылся новый интернет портал BlackSprut (Блекспрут) https://bs2cite.cc в даркнете, который предлагает купить нелегальные товары и заказать запрещенные услуги. Самая крупнейшая площадка СНГ. Любимые шопы и отзывчивая поддержка.
Реальные анкеты https://prostitutki-vyzvat-moskva.ru Москвы с проверенными фото – от элитных путан до дешевых шлюх. Каталог всех индивидуалок на каждой станции метро с реальными фотографиями без ретуши и с отзывами реальных клиентов.
Заказать вывоз мусора региональный вывоз мусора в Москве и Московской области, недорого и в любое время суток в мешках или контейнерами 8 м?, 20 м?, 27 м?, 38 м?, собственный автопарк. Заключаем договора на вывоз мусора.
продвижение сайтов частником в москве http://www.prodvizhenie-sajtov-v-moskve115.ru/ .
Видеопродакшн студия https://humanvideo.ru полного цикла. Современное оборудование продакшн-компании позволяет снимать видеоролики, фильмы и клипы высокого качества. Создание эффективных видеороликов для рекламы, мероприятий, видеоролики для бизнеса.
Оперативный вывод из запоя https://www.liveinternet.ru/users/laralim/post505923855/ на дому. Срочный выезд частного опытного нарколога круглосуточно. При необходимости больного госпитализируют в стационар.
продвижение сайтов в москве яндекс оплата за результат http://prodvizhenie-sajtov-v-moskve115.ru .
Conor Anthony McGregor https://conor-mcgregor.com.az Irish mixed martial arts fighter who also performed in professional boxing. He performs under the auspices of the UFC in the lightweight weight category. Former UFC lightweight and featherweight champion.
Welcome to our official site! Get to know the history, players and latest news of Inter Miami Football Club https://inter-miami.com.az. Discover with us the successes and great performances of America’s newest and most exciting soccer club.
Khabib Abdulmanapovich Nurmagomedov https://khabib-nurmagomedov.com.az Russian mixed martial arts fighter who performed under the auspices of the UFC. Former UFC lightweight champion.
Latest news and information about Marcelo https://marcelo.com.az on this site! Find Marcelo’s biography, career, playing stats and more. Find out the latest information about football master Marcelo with us!
Vinicius Junior https://vinisius-junior.com.az player news, fresh current and latest events for today about the player of the 2024 season
Khvicha Kvaratskhelia https://khvicha-kvaratskhelia.real-madrid-ar.com midfielder of the Georgian national football team and the Italian club “Napoli”. Became champion of Italy and best player in Serie A in the 2022/23 season. Kvaratskhelia is a graduate of Dynamo Tbilisi and played for the Rustavi team.
Saud Abdullah Abdulhamid https://saud-abdulhamid.real-madrid-ar.com Saudi footballer, defender of the Al -Hilal” and the Saudi Arabian national team. Asian champion in the age category up to 19 years. Abdulhamid is a graduate of the Al-Ittihad club. On December 14, 2018, he made his debut in the Saudi Pro League in a match against Al Bateen
Jude Victor William Bellingham https://jude-bellingham.real-madrid-ar.com English footballer, midfielder of the Spanish club Real Madrid and the England national team. In April 2024, he won the Breakthrough of the Year award from the Laureus World Sports Awards.
Forward Rodrigo https://rodrygo.real-madrid-ar.com is now rightfully considered a rising star of Real Madrid. The talented Santos graduate is compared to Neymar and Cristiano Ronaldo, but the young talent does not consider himself a star.
Thibaut Nicolas Marc Courtois https://thibaut-courtois.real-madrid-ar.com Footballeur belge, gardien de but du Club espagnol “Real Madrid”. Lors de la saison 2010/11, il a ete reconnu comme le meilleur gardien de la Pro League belge, ainsi que comme joueur de l’annee pour Genk. Trois fois vainqueur du Trophee Ricardo Zamora, decerne chaque annee au meilleur gardien espagnol
seo продвижение корпоративных сайтов в москве https://www.prodvizhenie-sajtov-v-moskve115.ru .
продвижение медицинских сайтов в москве http://prodvizhenie-sajtov-v-moskve115.ru .
Изготовление, сборка и ремонт мебели https://shkafy-na-zakaz.blogspot.com для Вас, от эконом до премиум класса.
Kylian Mbappe https://psg.kylian-mbappe-fr.com Footballeur, attaquant francais. L’attaquant de l’equipe de France Kylian Mbappe a longtemps refuse de signer un nouveau contrat avec le PSG, l’accord etant en vigueur jusqu’a l’ete 2022.
Sizin icin en iyi online casino Sweet bonanza
Paul Pogba https://psg.paul-pogba-fr.com is a world-famous football player who plays as a central midfielder. The player’s career had its share of ups and downs, but he was always distinguished by his perseverance and desire to win.
Kazanmak icin harika bir kumarhane Sweet bonanza
Kevin De Bruyne https://liverpool.kevin-de-bruyne-fr.com Belgian footballer, born 28 June 1991 years in Ghent. He has had a brilliant club career and also plays for the Belgium national team. De Bruyne is known for his spectacular goals and brilliant assists.