透過網頁讀取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": []
}
}
}
Mohamed Salah https://liverpool.mohamed-salah-cz.com, who grew up in a small town in Egypt, conquered Europe and became Liverpool star and one of the best players in the world.
The fascinating story of the rise of Brazilian prodigy Vinicius Junior https://realmadrid.vinicius-junior-cz.com to the heights of glory as part of the legendary Madrid “Real”
https://rolaks.com отделочные материалы для фасада – интернет-магазин
Изготовим для Вас изделия из металла https://smith-moskva.blogspot.com, по вашим чертежам или по нашим эскизам.
Промышленные насосы https://superomsk.ru/news/137099/pogrujne_nasos/ Wilo предлагают широкий ассортимент решений для различных отраслей промышленности, включая водоснабжение, отопление, вентиляцию, кондиционирование и многие другие. Благодаря своей высокой производительности и эффективности, насосы Wilo помогают снизить расходы на энергию и обслуживание, что делает их идеальным выбором для вашего бизнеса.
где купить dolce gabbana https://www.scm-fashion.ru .
порно анал на русском языке порно анал на русском языке .
Harry Kane’s journey https://bavaria.harry-kane-cz.com from Tottenham’s leading striker to Bayern’s leader and Champions League champion – this is the story of a triumphant ascent to the football Olympus.
Great site! I recommend to everyone!Best hotels Guide with price
French prodigy Kylian Mbappe https://realmadrid.kylian-mbappe-cz.com is taking football by storm, joining his main target, ” Real.” New titles and records are expected.
The site is dedicated to football https://fooball-egypt.com, football history and news. Latest news and fresh reviews of the world of football
где купить dolce gabbana http://www.scm-fashion.ru .
The path of 21-year-old Jude Bellingham https://realmadrid.jude-bellingham-cz.com from young talent to one of the most promising players in the world, reaching new heights with Dortmund and England.
сосать хуй сосать хуй .
Открытие для себя Ерлинг Хааланда https://manchestercity.erling-haaland-cz.com, a talented player of «Manchester City». Learn more about his skills, achievements and career growth.
Где купить Дольче Габбана http://www.scm-fashion.ru .
News, tournaments, guides and strategies about the latest GTA games https://gta-ar.com. Stay tuned for the best GTA gaming experience
Latest news https://android-games-ar.com about Android games, reviews and daily updates. The latest information about the most exciting games.
Discover the wonderful world of online games https://game-news-ar.com. Get the latest news, reviews and tips for your favorite games.
Minecraft news https://minecraft-ar.com, guides and in-depth reviews of the gaming features available in Minecraft Ar. Get the latest information on downloading Minecraft, Pocket Edition and Bedrock Edition.
News and events of the American Basketball League https://basketball-eg.com in Egypt. Hot events, player transfers and the most interesting events. Explore the world of the NBA with us.
The most important sports news https://bein-sport-egypt.com, photos and blogs from experts and famous athletes, as well as statistics and information about matches of leading leagues.
Интернет магазин электроники и цифровой техники по доступным ценам. Доставка мобильной электроники по Москве и Московской области.
Great site! I recommend to everyone!The best hotels
Discover the dynamic world of Arab sports https://sports-ar.com through the lens of Arab sports news. Your premier source for breaking news, exclusive interviews, in-depth analysis and live coverage of everything happening in sports.
Spider-Man https://spiderman.kz the latest news, articles, reviews, dates, spoilers and other latest information. All materials on the topic “Spider-Man”
Latest Counter-Strike 2 news https://counter-strike-kz.kz, watch the most successful tournaments and be the best in the gaming world.
The latest top football news https://football.sport-news-eg.com today. Interviews with football players, online broadcasts and match results, analytics and football forecasts, photos and videos.
Seveceginiz bir online casino Sweet bonanza
Help you get the most out of the services – Promonode