透過網頁讀取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": []
}
}
}
top 10 online pharmacy in india best online pharmacy india indian pharmacy online
п»їbest mexican online pharmacies buying from online mexican pharmacy mexican pharmaceuticals online
http://medicinefromindia.store/# india online pharmacy
mexican drugstore online: best online pharmacies in mexico – mexican mail order pharmacies
The table below gives you a quick reference for games availability with our shortlisted real money casino apps, alongside the top game software providers powering them. See where you can play your preferred slots and table games with the best casino apps for Android and iPhone. Slots.LV (10 Times Vegas): Slots.LV’s excellent selection of hot drop jackpots is enough for it to claim third place on our list of top jackpot slot casinos. Register today to claim a welcome bonus worth up to $7,500. As a communication tool, the Jonny Jackpot Mobile Web-App allows you to contact the support team on English, German, Finnish, Norwegian and French language via live chat or through the email app. The hot trend for iGaming in the state is exclusive games, as well as jackpot games.
https://onlinecasino71603.total-blog.com/poker-an-overview-40941982
ESCAPETOGETHER bonus terms: 240% match bonus holds 15x playthrough requirements and no limits on cashout. Will redeem unlimited times. Min deposit of $50. If you are Planet7 casino VIP player – then you are entitled to 290% no rules bonus instead. VIP code: VIPESCAPE. This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data. This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
https://certifiedpharmacymexico.pro/# medicine in mexico pharmacies
This product appears to currently be LIMITED SUPPLY or OUT OF STOCK. However, other similar products may be available. Feel free to check out similar products by this brand or call us. We would be happy to provide product recommendations. At 31 years of age, Cashman has been elected as the new leader of the Liberal Democrat opposition group in the Liverpool Council. He previously served as the leader of the Liberal Democrats in Knowsley, but has risen to a new position of power. Community Activities: Member of the Warren Lions Club, Board Member of Journey Health System (Chairman of the Finance Committee and a member of its Development and Audit Committee), Chairman of Beacon Light Behavioral Health System “Mr. Cashman has all the qualities and experience we were seeking, including having served as a faculty member at Prep for seven years,” said Sally Bednar, chair of Fairfield Prep’s Board of Governors. “I am pleased that he will lead Prep as our next president, and I am confident he will ensure Prep’s continued focus on academic excellence, thoughtful innovation, and athletic vigor.”
https://betcash666.com/top-10-best-payout-online-casinos-for-2023/
You can contact the Vegas Casino Online representatives at any time of the day, as they are there to support you 24 hours a day and seven days a week. Their English-speaking customer service can be reached via live chat or an email. Vegas Casino Online promises to answer all queries within 24 hours of receiving the emails, so you can expect a quick answer. You can contact them with any questions. Whether it is about the website, the software, games or fair play, their customer support is prepared to answer them all. The PokerStars online casino platform is optimized for mobile devices, allowing players to access their favorite games on the go via their smartphone or tablet. They have a ios and android app and they are both easy to use. TwinSpires Casino promo code 2021 gives new players in Michigan and Pennsylvania a $50 no deposit bonus, plus a deposit match up to $1000.
п»їbest mexican online pharmacies: mexican mail order pharmacies – buying from online mexican pharmacy
https://canadianinternationalpharmacy.pro/# canadian pharmacy oxycodone
best non prescription ed pills cheap cialis mexican pharmacy without prescription
online pharmacy india reputable indian online pharmacy best india pharmacy
Отличный сайт! Всем рекомендую!купить аттестат
https://edpill.cheap/# erectile dysfunction drugs
http://certifiedpharmacymexico.pro/# medicine in mexico pharmacies
order viagra 100mg viagra overnight sildenafil for sale online
http://certifiedpharmacymexico.pro/# mexican border pharmacies shipping to usa
india online pharmacy Online medicine home delivery best online pharmacy india
ed pills that work best male enhancement pills buying ed pills online
http://edwithoutdoctorprescription.pro/# online prescription for ed meds
brand furosemide lasix pills buy furosemide 40mg generic
online prescription for ed meds: generic cialis without a doctor prescription – ed meds online without prescription or membership
https://edpill.cheap/# best non prescription ed pills
cheapest ed pills best ed pills erectile dysfunction drug
canadian pharmacy prices canadian pharmacy online online canadian pharmacy
http://certifiedpharmacymexico.pro/# mexico pharmacy
mexico drug stores pharmacies: mexico pharmacies prescription drugs – medication from mexico pharmacy
http://edwithoutdoctorprescription.pro/# prescription meds without the prescriptions
buy prescription drugs cialis without a doctor prescription sildenafil without a doctor’s prescription
canadian online pharmacy northern pharmacy canada canada drugs
http://edwithoutdoctorprescription.pro/# viagra without a doctor prescription