透過網頁讀取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": []
}
}
}
online casino free spins
mobile casinos
online casinos real money no deposit
Disney+ Türkiye’de olmayan içerikler nasıl izlenir?
Marvel Sinematik Evrenine Ne Kadar Hakimsiniz?
order topamax generic
buy cialis 20mg online avodart 0.5mg uk order avodart 0.5mg generic
It’s really a nice and helpful piece of information. I am happy
that you simply shared tbis helpful information with
us. Please stay us up to date like this. Thank you for sharing.
Also visit my web site … quanto costa il kamagra
https://drugsbestprice.com/# ed in young men
https://drugsbestprice.com/# prescription drugs online without doctor
Brit ateşli Öpüşme GFE. 40:58. Ateşli Öpüşme GF POV uzun Seksi Vid.
2:10. açık alanda işerken bu ateşli redhead izle!
5:1. ateşli Kız Azgın Lezbiyen Tarafından Baştan. 8:26.
ateşli sarışın rujlu lezbiyen açık alanda amcık göster.
betonline casino
online casinos
casino bonus online
deposit casino bonus
online casino games for real money
mobile casino sites
best ed pills online male erection
cialis for men avodart price avodart order online
genuine cialis order levofloxacin 250mg without prescription order dutasteride generic
drugs and medications ed drugs over the counter
cheap online pharmacy prices of viagra at walmart
how to help ed ways to treat erectile dysfunction
best online casino to win money
real money casino no deposit
top us online casinos
https://drugsbestprice.com/# treatment with drugs
topiramate order online
best ed solution best natural cure for ed
cheap nexium 40mg overnight viagra delivery cheap cialis 5mg
online bingo real money
safe online casino
free no deposit
http://stromectolbestprice.com/# worming rabbits with ivermectin
best online casino deposit bonuses
real cash online casino
bonus no deposit
http://stromectolbestprice.com/# ivermectin paste for humans
Koupit vasotec acetensil berlipril ednyt enap enapril renitec invoril enalapril, Vasotec acetensil berlipril
ednyt enap enapril renitec invoril 5mg 20mg cena. Heliocentric grumble umbrageously
septennial Mariotte’s and furthermore fatal.
online gambling sites no deposit
free bonus no deposit casino
best online casinos for real money
Thanks for a Interesting item; I enjoyed it very much. Regards Sang Magistrale
order esomeprazole 20mg levitra or viagra order tadalafil 10mg online
buy nexium online cheap order phenergan tadalafil medication