透過網頁讀取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://zerkala-m.ru по низким ценам. Более 1980 моделей, купить недорого в интернет-магазине в Москве с доставкой по России. Удобный каталог, низкие цены, качественные фото.
Зеркала интерьерные https://zerkala-mag.ru в интернет-магазине «Зеркала с подсветкой» Самые низкие цены на зеркала!
Предлагаем купить гаражное оборудование https://profcomplex.pro, автохимию, технику и уборочный инвентарь для клининговых компаний. Доставка по Москве и другим городам России.
Доставка груза и грузоперевозки https://tamozhennyy-deklarant.blogspot.com по России через транспортную компанию автотранспортом доступна и для частных лиц. Перевозчик отправит или доставит ваш груз: выгодные тарифы индивидуальный подход из рук в руки 1 машиной.
Hi are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any html coding knowledge to make your own blog? Any help would be greatly appreciated!
https://vibeztalk.com/the-fine-line-between-innovation-and-respect/
En iyi kumarhanede sans?n?z? deneyin Sweet bonanza
Kumar oynamak icin en iyi secim Sweet bonanza
Latest news and analysis of the Premier League https://premier-league.kz. Full descriptions of matches, team statistics and the most interesting football events. Premier Kazakhstan is the best place for football fans.
Latest news about games for Android https://android-games.kz, reviews and daily updates. Read now and get the latest information about the most exciting games
Check out Minecraft kz https://minecraft-kz.kz for the latest news, guides, and in-depth reviews of the game options available. Find the latest information on Minecraft Download, Pocket Edition and Bedrock Edition.
Latest news from World of Warcraft https://wow-kz.kz (WOW) tournaments, strategy and game analysis. The most detailed gaming portal in the language.
Great site! I recommend to everyone!online hotel booking
продвижение сайтов в москве цена http://prodvizhenie-sajtov-v-moskve115.ru .
продвижение сайтов в москве тарифы http://www.prodvizhenie-sajtov-v-moskve115.ru .
Kumar oynamak icin mukemmel bir yer Sweet bonanza
Oynamak icin harika bir kumarhane Sweet bonanza
создание и продвижение сайтов в москве https://prodvizhenie-sajtov-v-moskve115.ru/ .
The latest top football news https://football-kz.kz today. Interviews with football players, online broadcasts and match results, analytics and football forecasts, photos and videos.
Latest news and information about the NBA https://basketball-kz.kz in Kazakhstan. Hot stories, player transfers and highlights. Watch the NBA world with us.
Top sports news https://sport-kz-news.kz, photos and blogs from experts and famous athletes, as well as statistics and information about matches of leading championships.
продвижение сайтов в москве гугл http://www.prodvizhenie-sajtov-v-moskve115.ru/ .
Game World https://kz-games.kz offers the latest online gaming news, game reviews, gameplay and ideas, gaming tactics and tips . Start playing our most popular and amazing games and get ready to become the leader in the online gaming world!
Al-Nasr https://al-nasr.com.az your source of news and information about Al-Nasr Football Club . Find out the latest results, transfer news, player and manager interviews, fixtures and much more.
You have a source of the latest and most interesting sports news from Kazakhstan: “Kazakhstan sports news https://sports-kazahstan.kz: Games and records” ! Follow us to receive updates and interesting news every minute!
Usain St. Leo Bolt https://usain-bolt.com.az Jamaican track and field athlete, specialized in short-distance running, eight-time Olympic champion and 11-time world champion (a record in the history of this competition among men).
Lev Ivanovich Yashin https://lev-yashin.com.az Soviet football player, goalkeeper. Olympic champion in 1956 and European champion in 1960, five-time champion of the USSR, three-time winner of the USSR Cup.
flexeril us – flexeril drug vasotec 5mg canada
seo продвижение сайтов заказать в москве https://www.prodvizhenie-sajtov-v-moskve115.ru .
Монтаж систем отопления https://fectum.pro, водоснабжения, вентиляции, канализации, очистки воды, пылеудаления, снеготаяния, гелиосистем в Краснодаре под ключ.
Muhammad Ali https://muhammad-ali.com.az American professional boxer who competed in the heavy weight category; one of the most famous boxers in the history of world boxing.