透過網頁讀取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://azithromycin.blog/# zithromax antibiotic without prescription
isosorbide 40mg sale azithromycin 250mg ca order atenolol sale
https://paxil.tech/# paxil flu
buy paxil paxil price
prednisone capsules can i buy prednisone online without a prescription
order sulfasalazine 500mg sale order benicar 20mg pills divalproex 500mg oral
propecia 1mg finasteride hair
https://deltasone.icu/# prednisone 5 mg tablet price
sulfasalazine brand benicar oral depakote pill
brand azulfidine 500mg purchase calan pills buy depakote 250mg for sale
https://finasteride.top/# propecia pill
You actually make it seem reeally easy along with your presentation however I in finding this topic
to be actually one thing that I think I would
by nno meeans understand. It seems too complicated and very
large for me. I’m having a look ahead to your next post, I’ll try to get the dangle
of it!
My blog prospecto kamagra 100 mg
Admiring the time and effort you put into your site and detailed info you offer!
https://finasteride.top/# buy propecia without prescription
https://paxil.tech/# paxil depression
https://azithromycin.blog/# zithromax antibiotic without prescription
cost vardenafil
minocin 50mg without prescription buy pioglitazone 15mg sale arava 20mg pill
https://finasteride.top/# propecia finasteride
sports betting line movement bets on sports game sport bet
I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thank you again
https://paxil.tech/# paxil headache
cialis pills for sale ivermectin for rosacea
minocin 100mg over the counter hytrin tablet arava for sale online
generic minocycline 100mg buy pioglitazone 15mg online cheap generic arava
metformin 500 mg price south africa metformin singapore
order vardenafil online
https://wellbutrin.best/# wellbutrin bupropion
order catapres 0.1 mg generic meclizine oral buy antivert 25mg for sale
https://valtrex.icu/# valtrex medicine price