透過網頁讀取PSD後，依圖層輸出PNG檔案
在前面介紹過網頁可以讀取PSD檔案並擷取到該檔案的資訊，接著我們會希望能透過網頁上傳PSD檔之後，依照圖層來輸出圖片，同樣是利用PSD.js來輔助進行，可以透過我們製作的範例頁面來進行輸出測試。
預設輸出效果
透過PSD.js可將PSD內的各圖層輸出成PNG圖檔，亦可轉成Base 64圖檔格式，惟輸出時每個圖檔的尺寸並不會根據整體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 PSD here</p>
</div>
<div id="image"></div>
<pre id="data"></pre>
<script type="text/javascript">
(function () {
const 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) {
for (var i = 0; i < psd.layers.length; i ++){
document.getElementById('image').appendChild(psd.layers[i].image.toPng());
}
});
}
}());
</script>
</body>
</html>
依照整體PSD配置進行輸出
我們希望讓每個圖片在輸出後能保時相同的尺寸，也就是依照PSD的畫布大小來輸出每一張圖檔，但在原生PSD.js中並不具備這樣的功能，於是我們透過下述的方式來達成：
- 擷取PSD資訊並將圖檔轉為Base 64格式
- 產生與PSD尺寸大小相同的HTML Canvas
- 將產生的Base 64圖檔，依照原始位置放入Canvas中
- 將Canvas轉成PNG圖檔
可以參考我們製作的範例頁面
<!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 PSD here</p>
</div>
<div id="image"></div>
<pre id="data"></pre>
<script type="text/javascript">
(function () {
const 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) {
const PSDWidth = psd.tree().width;
const PSDHeight = psd.tree().height;
for (var i = 0; i < psd.layers.length; i ++){
const img = new Image();
img.src = psd.layers[i].image.toBase64();
console.log(psd);
const layerWidth = psd.layers[i].width;
const layerHeight = psd.layers[i].height;
const layerLeft = psd.layers[i].left;
const layerTop = psd.layers[i].top;
const canvas = document.createElement("canvas");
canvas.setAttribute('class', "canvas");
canvas.width = PSDWidth;
canvas.height = PSDHeight;
console.log("canvas :", canvas);
img.onload = function(){
canvas.getContext("2d").drawImage(img, layerLeft, layerTop, layerWidth, layerHeight);
document.getElementById('image').appendChild(canvas);
}
}
});
}
}());
</script>
</body>
</html>
PSD檔案輸出限制
1. 無法輸出帶有效果的圖片
在PSD中我們可能會針對圖層套用一些效果，例如：陰影、光暈、筆畫…等等，但在輸出後的圖檔將不會帶有這些效果。
解決方法：透過點陣化圖層效果，即可輸出相對應的圖檔。
2. 無法輸出帶有遮色片效果的圖片
解決方法：將圖層轉為智慧型物件，即可輸出相對應的圖檔。
3. 無法依圖層混合模式輸出圖片
解決方法：無法解決
USACanadaPharm: best online canadian pharmacy – usa canada pharm
1win online games https://1win18.com.ng/ .
мелбет kg https://www.melbet1001.ru .
USACanadaPharm: usa canada pharm – USACanadaPharm
mel bet сайт http://www.melbet1001.ru .
Приобрести документ университета можно в нашей компании в Москве. Мы предлагаем документы об окончании любых ВУЗов Российской Федерации. Вы сможете получить диплом по любым специальностям, включая документы старого образца. Даем 100% гарантию, что в случае проверки документа работодателями, каких-либо подозрений не появится. diplomaj-v-tule.ru/kupit-diplom-cherez-reestr-bistro-i-bez-lishnix-problem/
darknet markets 2025 dark web sites
1win.pro 1win.pro .
tor drug market dark web drug marketplace
Thanks for the tips about credit repair on this particular blog. The things i would tell people is always to give up the mentality that they’ll buy currently and pay out later. As a society most people tend to do this for many things. This includes family vacations, furniture, along with items we really want to have. However, you must separate the wants from all the needs. While you’re working to boost your credit score make some sacrifices. For example you’ll be able to shop online to save money or you can look at second hand shops instead of high-priced department stores intended for clothing.
мелбет кж melbet1001.ru .
canadian medications: USACanadaPharm – canadian family pharmacy
USACanadaPharm: USACanadaPharm – ordering drugs from canada
1 win pro https://1win7017.ru/ .
dark web market dark web market links
onlinecanadianpharmacy 24 usa canada pharm usa canada pharm
1win скачать https://1win7006.ru/ .
Приобрести документ о получении высшего образования можно у нас в столице. Мы предлагаем документы об окончании любых ВУЗов Российской Федерации. Вы получите диплом по любым специальностям, включая документы старого образца. Даем гарантию, что в случае проверки документа работодателями, каких-либо подозрений не появится. diplomaj-v-tule.ru/kupit-podlinnij-diplom-s-zaneseniem-v-reestr-7/
2025年NBA免費線上看直播：籃球投注與即時更新的完整指南
隨著全球體育迷對線上博弈和賽事直播的需求不斷增長，NBA作為最受歡迎的籃球聯賽之一，自然成為了眾多球迷關注的焦點。2025年的NBA賽季將帶來更多精采的比賽，而如何免費觀看這些比賽並參與場中投注，已成為球迷們最關心的話題。本文將為您提供完整的NBA免費線上看直播教學、即時比分更新、以及相關的投注技巧。
一、NBA免費線上看直播的管道
不論是季後賽（4月-5月）還是總決賽（6月），NBA的每一場比賽都充滿激情與挑戰。以下是幾種常見的免費直播方式：
1. 線上直播平台
OB體育電視台 、鑫寶體育電視台 、SUPER體育電視台 等平台提供免費註冊服務，新用戶還可獲得168預測金，讓您在觀看比賽的同時也能進行運彩投注。
只需簡單註冊帳號，選擇【熊貓體育】或【RG富遊體育電視台】，即可輕鬆進入NBA籃球LIVE直播。
2. 電視轉播頻道
華視NBA籃球頻道 、ELTA TV 、以及中華電信MOD 也提供64場全賽事的LIVE轉播，適合喜歡透過電視欣賞比賽的球迷。
如果您偏好手機觀看，可以訂閱Hami Video NBA專區 ，每月僅需149元即可享受所有賽事的高清轉播。
二、如何註冊/登入以免費觀看NBA直播？
如果您想通過線上平台觀看NBA直播，以下是詳細步驟：
點選【RG官網】或【富遊娛樂城】官網，選擇「註冊/登入」。
輸入會員資料完成註冊。
登入後，點選【熊貓體育】或【體育直播】分類。
選擇NBA籃球視頻直播，即可免費觀看您感興趣的比賽。
三、NBA即時比分與場中投注
對於熱衷於運動彩券的球迷來說，NBA不僅是一場視覺盛宴，更是投注的好時機。以下是一些實用的投注建議：
即時比分更新 ：透過【RG富遊體育電視台】或【熊貓體育】，您可以隨時掌握比賽進展，並根據比分變化調整投注策略。
場中投注技巧 ：例如，在比賽關鍵時刻（如延長賽或最後三分鐘），利用即時數據進行快速下注，往往能提高勝率。
此外，NBA季後賽和總決賽期間，各平台通常會推出特別優惠活動，例如加倍獎金或贈送預測金，讓您的投注更有趣味性。
四、其他熱門賽事推薦
除了NBA之外，2025年還有許多值得期待的體育盛事：
2024夏季奧運 ：涵蓋多項運動項目，是體育迷不容錯過的國際賽事。
2024歐洲盃 ：足球迷的年度盛宴，各國勁旅爭奪最高榮譽。
2024 WBC世界棒球經典賽 ：棒球愛好者的狂歡節，亞洲強隊表現備受矚目。
2023-2024英超聯賽 ：足球迷必追的頂級聯賽，精彩程度無與倫比。
五、結語
無論您是單純的NBA球迷，還是熱衷於運動彩券投注的玩家，2025年的NBA賽季都將為您帶來無限樂趣。透過本文介紹的免費直播管道與投注技巧，您可以輕鬆享受每場比賽的刺激與精彩。現在就趕快註冊帳號，加入這場籃球狂歡吧！
立即行動！登入【熊貓體育】或【RG富遊體育電視台】，開啟您的NBA免費線上看之旅！
usa canada pharm: pharmacy com canada – USACanadaPharm
dark market onion darkmarkets
usa canada pharm: northern pharmacy canada – safe reliable canadian pharmacy
pharmacy rx world canada USACanadaPharm canadian world pharmacy
Great information. Lucky me I recently found your blog by accident (stumbleupon).
I have bookmarked it for later!
https://usacanadapharm.com/# USACanadaPharm
dark web drug marketplace darknet markets 2025
USACanadaPharm: canada pharmacy online – USACanadaPharm
Где приобрести диплом специалиста?
Полученный диплом со всеми печатями и подписями отвечает стандартам, неотличим от оригинала – даже со специальным оборудованием. Не откладывайте свои мечты и цели на потом, реализуйте их с нашей помощью – отправляйте заявку на диплом сегодня! Диплом о среднем образовании – не проблема! mxlinkin.mimeld.com/read-blog/5093_segodnya-priobresti-dokumenty-o-zavershenii-obucheniya-elementarno-nezavisimo-ot.html
https://usacanadapharm.com/# prescription drugs canada buy online
тревожная кнопка охрана цена https://www.trevros.ru .