透過網頁讀取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://forumsilverstars.forum24.ru/?1-2-0-00000149-000-0-0-1730745615 .
вывод из запоя в стационаре воронежа http://rubiz.forum.cool/viewtopic.php?id=3748/ .
фон бет фон бет .
Top Apps to Make Money in Pakistan, Simple Ways to Make Money in Pakistan Through an App, Secret Methods to Make Money in Pakistan, For Quick Earnings, Popular Apps to Make Money in Pakistan, Is it possible to earn money in Pakistan through applications?, for successful earnings, Promising applications for earning money in Pakistan, for those who strive for financial independence, to increase financial flow, Effective strategies for making money in Pakistan through apps, Updated platforms for making money in Pakistan, The most interesting apps for making money in Pakistan, for making money quickly, Optimal platforms for making money in Pakistan, for making money at home, which bring real money, to improve financial situationearning app in pakistan real money earning apps in pakistan .
быстрый анонимный вывод из запоя на дому быстрый анонимный вывод из запоя на дому .
фонбет фонбет .
вывод из запоя в воронеже http://www.my.forum2.net/viewtopic.php?id=174 .
вывод из запоя бесплатно mymoscow.forum24.ru/?1-6-0-00022914-000-0-0-1730745663 .
Priligy tablets: dapoxetine price – dapoxetine online
Купить диплом о среднем полном образовании, в чем подвох и как избежать обмана?
Всё, что нужно знать о покупке аттестата о среднем образовании
fonbet by fonbet by .
Узнай все о операция по увеличению пениса цена операция по увеличению члена цена
фонбет беларусь фонбет беларусь .
cheap plavix antiplatelet drug buy Plavix Clo Cost of Plavix without insurance
Узнай все о операция увеличение члена увеличение члена
вывод из запоя на дому краснодар вывод из запоя на дому краснодар .
вывод из запоя краснодар на дому анонимно вывод из запоя краснодар на дому анонимно .
вывод из запоя краснодар https://sergiev.0pk.me/viewtopic.php?id=3461/ .
http://iverfast.com/# purchase ivermectin
фонбет фонбет .
вывод из запоя в стационаре воронежа https://vip.rolevaya.info/viewtopic.php?id=6913 .
фон бет фон бет .
фонбет беларусь фонбет беларусь .
фонбет беларусь фонбет беларусь .
вывод из запоя на дому краснодар круглосуточно https://kozaostra.mybb.ru/viewtopic.php?id=14290/ .
Look at my site; Explore Daycares Locations
вывод из запоя краснодар стационар mymoscow.forum24.ru/?1-6-0-00022914-000-0-0-1730745663 .
вывод из запоя в стационаре анонимно вывод из запоя в стационаре анонимно .
cheapest Lisinopril: lisinopril1st – cheapest Lisinopril