透過網頁讀取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://gabapentin.top/# gabapentin 600 mg
diflucan 50 mg capsule diflucan 150 mg tablet price
clonidine generic stromectol us oral antivert
order clonidine antivert 25mg for sale buy meclizine 25mg pills
https://valtrex.icu/# how to buy valtrex
https://valtrex.icu/# valtrex generic
valtrex prescription uk cost for generic valtrex
diflucan buy diflucan drug
buy arimidex 1 mg without prescription Price cialis purchase tadalafil for sale
This is something that will need all of our combined efforts to address.
The long list of online poker sites has a lot to offer to the players. So, either you are a newbie fresh off the start, seasoned player trying to play as many games, and recreational poker players who play when they feel they can get their A-game on. If you are someone who’s just stepped in the wonderful world of poker and are on an exploring spree, you can try out freerolls which are offered by poker rooms either on a daily basis or weekly. Poker pros know a lot about the poker game, they are careful about which tournaments they play and which they skip. Their gameplay is well chalked out one. Let’s take a look at the best poker sites in India. The best online poker sites in Australia are hard to find. Always try to find the top rated online poker sites Australia offers. Online real money poker in Australia is easy to access at reputable poker sites with options for cash gaming with several variants as well as tournaments, including MTTs, SNGs and guaranteed options. The best Australian poker sites for real money help you to enjoy your favorite poker games with a variety of buy-ins, incentives and rewards. https://thejoyguy.com/community/profile/deborahtelfer36/ Instead of cash prizes, a free bonus no deposit casino can incentivize players to play with additional chips. It means you can enjoy traditional table games such as blackjack and poker at no cost. Read the policy on the offer to determine what categories qualify for the promotion and if you’re able to use it in the live casino section. There are plenty of minimum deposit casinos in Canada that are making gambling even more exciting for the players. Just like any other casino, these platforms are also filled with bonuses and promotions that increase your winnings. When you play real money games at any $1 deposit casino in Canada, you can expect these bonus offers: Rich Casino No Deposit Bonus Codes (60 Free Spins) Rich Casino is an online casino that offers players a wide variety of games including slots, roulette, blackjack, video poker, scratch…
anastrozole 1 mg uk Cialis online cialis 10mg ca
order arimidex 1 mg for sale Generic cialis usa order tadalafil 10mg
https://wellbutrin.best/# generic wellbutrin online no rx
https://gabapentin.top/# gabapentin 300
https://ventolin.tech/# ventolin canadian pharmacy
ny state sports betting best sport betting site sports betting apps nevada
https://valtrex.icu/# valtrex in australia
https://ventolin.tech/# generic ventolin medication
ventolin cost ventolin 100 mg
https://diflucan.life/# over the counter diflucan cream
diflucan 750 mg diflucan discount coupon
buy indocin 50mg online brand cefixime order trimox 500mg generic
Awesome post. It’s so good to see someone taking the time to share this information
best generic wellbutrin 2015 cheap wellbutrin sr
https://valtrex.icu/# valtrex medication
Hey are using WordPress for our site platform? I’m new to thhe
blog world but I’m trying to get started aand set up my own. Do you require any coding knowledge to make your own blog?
Any help would bbe greatly appreciated!
Feel free tto surf to my web page … acheter du cialis sans ordonnance
tadalis 20mg ca order generic tadalafil 20mg voltaren over the counter
We are a Biomedical and Sterilizer services company. We work on all surgical and all medical equipment. We provide all Annual and Semi-annual service needs for surgical and physicians suites. https://biomedical-total-care.com
Well, I don’t know if that’s going to work for me, but definitely worked for you! 🙂 Excellent post!