透過網頁讀取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://cipro.best/# ciprofloxacin mail online
https://gabapentin.icu/# neurontin price south africa
https://withoutprescription.store/# sildenafil without a doctor’s prescription
Your thing regarding creating will be practically nothing in short supply of awesome. This informative article is incredibly useful and contains offered myself a better solution to be able to my own issues. Which can be the specific purpose MY PARTNER AND I has been doing a search online. I am advocating this informative article with a good friend. I know they are going to get the write-up since beneficial as i would. Yet again many thanks.
https://cipro.best/# where can i buy cipro online
neurontin 600 mg pill neurontin prescription cost
https://erectionpills.best/# treatment for ed
cure ed non prescription ed pills
buy ciprofloxacin over the counter ciprofloxacin over the counter
buy prescription drugs buy prescription drugs from canada cheap
ondansetron 8mg uk – order valtrex sale valacyclovir order
medication lisinopril 5 mg
neurontin 400 800mg neurontin
Nice Post. It’s really a very good article. I noticed all your important points. Thanks.
https://gabapentin.icu/# neurontin generic brand
I know you’ve heard this one before, but there’s a reason… painting is the most transformative and cost effective way to change your builder-grade cabinets. Most of these types of cabinets are MDF covered in wood or laminate veneer, so you’re not destroying beautiful woodwork. Here’s my easy five step process for updating kitchen cabinets of this type: Want to maximize storage in the kitchen without building more cabinetry? Look to your pantry or cabinet doors as blank canvases for all your hanging storage needs. Put that wasted space to good use and install a small window treatment rod (like this Fintorp Ikea rail and Syrlig curtain clips) to hang spices, potholders and more in reach and out of sight. I mean, at the time, those choices were TRENDY, right? But that’s the problem when you decorate based on what’s TRENDY – it doesn’t always stay that way. Sure, you might happen on some timeless element that can stretch into the next few decades, but chances are – you’re going to have to do a small OR LARGE scale renovation to update your home for either personal use or resale. https://electrodaze.com/profile/ivymcclintock8/ In the living room, we painted the previously red walls white and put in plantation shutters. I am currently working on decorating these rooms. I’m playing with furniture arrangement (as you can see by the pads under the piano legs!), and I’ve got lots of accessorizing left to do. In an attempt to play up the home’s stunning symmetry, our designers made the garage stand out as a separate entity with dark, interesting garage doors and industrial lights. The copper awning and wooden fence add warmth and a classic touch to an updated exterior. Typically, the faГ§ade of a ranch house is sleek and simple. But the doorway itself can set a modern, captivating tone. Contemporary single entry doors with a wide sidelite window can add attention, while double doors add a more formal tone. Spice up your exterior color palette with a bold door color like yellow, red, or turquoise to add a pop that draws the eye.
buy ondansetron without prescription – order aldactone 25mg for sale valacyclovir 500mg us
neurontin for sale gabapentin 300mg
https://withoutprescription.store/# prescription drugs online
https://gabapentin.icu/# medicine neurontin
neurontin capsule 400 mg neurontin 300mg caps
Thank you, I have just been searching for information about this topic for ages and yours is the greatest I’ve discovered till now. But, what about the conclusion? Are you sure about the source?
There most be a solution for this problem, some people think there will be now solutions, but i think there wil be one.
cheap ed pills best erection pills
lucky slots on facebook
casino free play slot
old vegas world slots