透過網頁讀取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": []
}
}
}
мастерская по ремонту стиральных машин мастерская по ремонту стиральных машин .
Отличный сатй! Всем рекомендую!продать золото
Manchester City and Erling Haaland https://manchester-city.erling-haaland-fr.com explosive synergy in action. How a club and a footballer light up stadiums with their dynamic play.
Lionel Messi https://inter-miami.lionel-messi-fr.com legendary Argentine footballer, announced his transfer to the American club Inter Miami.
Legendary striker Cristiano Ronaldo https://an-nasr.cristiano-ronaldo-fr.com signed a contract with the Saudi club ” An-Nasr”, opening a new chapter in his illustrious career in the Middle East.
Marcus Lilian Thuram-Julien https://internationale.marcus-thuram-fr.com French footballer, forward for the Internazionale club and French national team.
Официальный сайт онлайн-казино Vavada https://vavada-kz-game.kz это новый адрес лучших слотов и джекпотов. Ознакомьтесь с бонусами и играйте на реальные деньги из Казахстана.
That is really attention-grabbing, You are a very professional blogger. I have joined your rss feed and sit up for in the hunt for extra of your great post. Also, I have shared your site in my social networks
вавада официальный сайт вход
En iyi kumarhanelerde sans?n?z? deneyin Sweet bonanza
Kumar oynamak icin en iyi secim Sweet bonanza
Ronaldo de Asis Moreira https://ronaldinyo.com braziliyalik futbolchi, yarim himoyachi va hujumchi sifatida o’ynagan. Jahon chempioni (2002). “Oltin to’p” sovrindori (2005).
Get the latest https://mesut-ozil-uz.com Mesut Ozil news, stats, photos and more.
Serxio Ramos Garsiya https://serxio-ramos.com ispaniyalik futbolchi, himoyachi. Ispaniya terma jamoasining sobiq futbolchisi. 16 mavsum davomida u “Real Madrid”da markaziy himoyachi sifatida o’ynadi.
Latest news about Pele https://mesut-ozil-uz.com, statistics, photos and much more. Get the latest news and information about football legend Pele.
Explore the extraordinary journey of Kylian Mbappe https://mbappe-real-madrid.com, from his humble beginnings to global stardom.
Discover the wonderful world of online games https://onlayn-oyinlar.com with GameHub. Get the latest news, reviews and tips for your favorite games. Join our gaming community today!
Sports news https://gta-uzbek.com the most respected sports site in Uzbekistan, which contains the latest sports news, forecasts and analysis.
Latest GTA game news https://gta-uzbek.com, tournaments, guides and strategies. Stay tuned for the best GTA gaming experience
Latest boxing news, achievements of Raisol Abbasov https://boxing-ar.com, Tyson Fury fights and much more. It’s all about the boxing ambassador.
Latest news from the world of boxing https://boks-uz.com, achievements of Resul Abbasov, Tyson Fury’s fights and much more. Everything Boxing Ambassador has.
починить стиральную машину в москве починить стиральную машину в москве .
сервис ремонта стиральных машин http://www.centr-remonta-stiralnyh-mashin.ru .
Отличный сатй! Всем рекомендую!скупка золота
NFL https://nfl-ar.com News, analysis and topics about the latest practices, victories and records. A portal that explores the most beautiful games in the NFL world in general.
Latest Counter-Strike 2 news https://counter-strike-ar.com, watch the most successful tournaments and be the best in the gaming world on CS2 ar.
Discover exciting virtual football https://fortnite-ar.com in Fortnite. Your central hub for the latest news, expert strategy and exciting eSports reporting.
The latest analysis, reviews of https://spider-man-ar.com tournaments and the most interesting things from the “Spider-Man” series of games in Azerbaijani language. It’s all here!
Latest World of Warcraft tournament news https://ar-wow.com (WOW), strategies and game analysis. The most detailed gaming portal in Arabic.
H?zl? odeme yapan kumarhane Sweet bonanza
Hayallerinizdeki kumarhane Sweet bonanza