透過網頁讀取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": []
}
}
}
Энергообъединение участков от компании БИОН. Проводим объединение земляных участков. ЯЗЫК нас можно заказать перераспределение миров (а) также аграрных мест, что-что также энергообъединение площадей на СНТ.
https://bion-online.ru/
Hmm is anyone else having problems with the pictures on this blog loading? I’m trying to figure out if its a problem on my end or if it’s the blog. Any feedback would be greatly appreciated.
сигнализация Pandora на Атлас
спортивная площадка купить для улицы http://www.ploshadka-sport.ru .
En iyi kumarhanede buyuk kazan?n Sweet bonanza
ООО «Транс Инвест» – сложная логистика и мультимодальные перевозки грузов числом Стране россии c 2012 лета
https://ticargo.ru/
H?zl? odeme yapan kumarhane Sweet bonanza
The Dota 2 website https://dota2.com.az Azerbaijan provides the most detailed information about the latest game updates, tournaments and upcoming events. We have all the winning tactics, secrets and important guides.
Play PUBG Mobile https://pubg-mobile.com.az an exciting world of high-quality mobile battle royale. Unique maps, strategies and intense combat await you in this exciting mobile version of the popular game.
https://santekhnik-moskva.blogspot.com — вызов сантехника на дом в Москве и Московской области в удобное для вас время.
Каталог рейтингов хостингов https://pro-hosting.tech на любой вкус и под любые, даже самые сложные, задачи.
спортивные площадки для улицы спортивные площадки для улицы .
Discover the fascinating world of online games with GameHub Azerbaijan https://online-game.com.az. Get the latest news, reviews and tips for your favorite games. Join our gaming community today!
The latest top football news https://futbol.com.az today. Interviews with football players, online broadcasts and match results, analytics and football forecasts, photos and videos.
Latest news and details about the NBA in Azerbaijan https://nba.com.az. Hot events, player transfers and the most interesting events. Explore the world of the NBA with us.
Top sports news https://idman-azerbaycan.com.az photos and blogs from experts and famous athletes, as well as statistics and information about matches of leading championships.
En unlu kumarhanede sans?n?z? deneyin Sweet bonanza
спортивные площадки на улице спортивные площадки на улице .
NHL (National Hockey League) News https://nhl.com.az the latest and greatest NHL news for today. Sports news – latest NHL news, standings, match results, online broadcasts.
UFC in Azerbaijan https://ufc.com.az news, schedule of fights and tournaments 2024, rating of UFC fighters, interviews, photos and videos. Live broadcasts and broadcasts of tournaments, statistics.
The main sports news of Azerbaijan https://idman.com.az. Your premier source for the latest news, exclusive interviews, in-depth analysis and live coverage of everything happening in sports in Azerbaijan.
World of Games https://onlayn-oyunlar.com.az provides the latest news about online games, game reviews, gameplay and ideas, game tactics and tips. The most popular and spectacular
Sports in Azerbaijan https://idman-xeberleri.com.az development and popular sports Azerbaijan is a country with rich sports traditions and outstanding achievements on the international stage.
Pin up entry to the official website. Play online casino Pin Up https://pin-up.prostoprosport.ru for real money. Register on the Pin Up Casino website and claim bonuses!
Slot machines on the official website and mirrors of the Pin Up online casino https://pin-up.tr-kazakhstan.kz are available for free mode, and after registering at Pin Up Casino Ru you can play for money.
Pin Up casino https://pin-up.salexy.kz official website, Pin Up slot machines play for money online, Pin Up mirror working for today.
Качественная и недорогая детская мебель для девочки лучшие цены, доставка и сборка.
Большой выбор игровых автоматов, рабочее зеркало сайта плей фортуна зеркало на сегодня играть на реальные деньги онлайн
https://businka74.ru казино риобет
Качественная и недорогая мебель для кухни интернет магазин лучшие цены, доставка и сборка.
Большой выбор игровых автоматов, рабочее зеркало сайта play fortuna рабочее зеркало играть на реальные деньги онлайн