透過網頁讀取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": []
}
}
}
Тут делают продвижение разработка мед сайтов разработка сайта медицинской клиники
Тут делают продвижение сео медицина seo медицинских сайтов
pin up kz https://pinupaz.bid/# pin up az
pin up казино
пин ап вход: пинап казино – пин ап казино
Тут делают продвижение создание сайта для медицинского центра разработка мед сайтов
pin up guncel giris pin-up bonanza pin-up casino
pin up guncel giris: pin up casino guncel giris – pin up giris
Тут делают продвижение seo продвижение медицинских сайтов seo-продвижение медицинских сайтов
Тут делают продвижение создание сайта медицинского центра создание сайта клиники
В магазине сейфов предлагают купить сейф 2 купить сейф 2 класс в москве
Тут делают продвижение комплексное продвижение медицинских сайтов комплексное продвижение медицинских сайтов
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервисные центры по ремонту техники в волгограде
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
пин ап казино вход: пинап казино – пинап казино
pin up пин ап казино зеркало pin up
Профессиональный сервисный центр по ремонту планшетов в Москве.
Мы предлагаем: замена матрицы планшета
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
снять проститутку в питере https://kykli.com/
How to Get 1xBet Promo Code https://idematapp.com/wp-content/pages/1xbet_promo_codes_free_bonus_offers.html
1xBet promo codes can be obtained through various channels, including promotions on the 1xBet website, social media, affiliate websites, or special events. Users can enter these codes during registration or deposit to claim bonuses.
Hi I am so grateful I found your blog page, I really found you by accident, while I was searching on Bing for something else, Anyhow I am here now and would just like to say thanks for a tremendous post and a all round thrilling blog (I also love the theme/design), I don’t have time to browse it all at the minute but I have saved it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the excellent job.
https://oils.earth/pages/events
pin-up casino giris: pin up giris – pin up casino
В магазине сейфов предлагают сейф 2 класса взломостойкости сейф 2 класса взломостойкости
pin up bet: pin-up casino giris – pin up casino guncel giris
pin up casino: pin up casino guncel giris – pin up giris
пин ап казино онлайн https://pinupru.site/# пин ап официальный сайт
пин ап 634
В магазине сейфов предлагают купить сейф 2 класс в москве купить сейф 2
В магазине сейфов предлагают купить сейф 2 сейфы 2 класса
пинап кз пин ап казино онлайн пин ап казахстан
https://www.armatura4u.ru
Профессиональный сервисный центр сдача телефона в ремонт ремонт телефонов цены
dwp7lz
pin-up casino pin up aviator pin up casino guncel giris