透過網頁讀取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": []
}
}
}
Feel free to surf to my blog … Explore Daycares Locations
Feel free to surf to my webpage: High Stake
What’s up, after reading this remarkable paragraph i am too happy to share my knowledge here with colleagues.
http://tehnoprice.in.ua/trivalist-zhittya-bi-led-linz-shcho-ochikuvati
find out here https://jaxx-wallet.net
https://mexicaneasypharm.com/# Mexican Easy Pharm
canadian family pharmacy
Indian pharmacy international shipping Best online Indian pharmacy Indian Cert Pharm
сделать капельницу на дому от алкоголя сделать капельницу на дому от алкоголя .
рейтинги процессоров рейтинги процессоров .
https://mexicaneasypharm.com/# mexico drug stores pharmacies
legit canadian pharmacy
cross border pharmacy canada https://mexicaneasypharm.com/# Mexican Easy Pharm
world pharmacy india
Indian Cert Pharm: Indian pharmacy that ships to usa – Online medicine
обзор процессоров обзор процессоров .
medicine in mexico pharmacies: Mexican Easy Pharm – mexican drugstore online
вывод из запоя на дому нижний вывод из запоя на дому нижний .
купить настоящий диплом о среднем образовании
india pharmacy: Indian Cert Pharm – indian pharmacy
Betzula, en populer bahis platformu konusunda essiz deneyimler sunar. en heyecanl? maclar icin betzula guncel giris baglant?s? ile favori tak?mlar?n?za destek olabilirsiniz.
Betzula’n?n guvenilir altyap?s?, sorunsuz bir deneyim sunar. Betzula Twitter hesab?n? takip ederek ozel promosyonlardan haberdar olabilirsiniz.
Fenerbahce ve Galatasaray gibi buyuk tak?mlar?n heyecan?n? Betzula ile yasayabilirsiniz.
Ayr?ca, Betzula guncel giris adresi, mobil cihazlar uzerinden kolay erisim sunar. Ozel olarak, https://aydinlikevlernakliyat.com/ – betzula guncel giris, profesyonel bir deneyim saglar.
Betzula, en genis bahis seceneklerinden ozel turnuvalara kadar tum kullan?c?lar?n ihtiyaclar?n? kars?lar. Fenerbahce Galatasaray derbisi icin bahis yapmak icin Betzula ile kazanmaya baslay?n!
371212+
рейтинги процессоров для пк http://www.topcpu.ru/ .
canadian pharmacy price checker https://indiancertpharm.com/# Indian pharmacy international shipping
india pharmacy
рейтинги производительности процессоров рейтинги производительности процессоров .
рейтинги производительности процессоров рейтинги производительности процессоров .
диплом купить колледжа
check my blog https://jaxx-liberty.com
выведение из запоя на дому круглосуточно выведение из запоя на дому круглосуточно .
сравнение производительности процессоров http://topcpu.ru .
сравнение процессоров intel https://topcpu.ru/ .
поставить капельницу от запоя поставить капельницу от запоя .
купить настоящий диплом о среднем образовании
обзор процессоров [url=https://www.topcpu.ru]обзор процессоров[/url] .
SportyBet live betting http://www.sportybetzambia.pro/ .