透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
セクシー ランジェリー“It’s a drastic change from last year’s festivities,when the official Times Square site noted in its FAQ section,
D.セクシー ランジェリーC.
ランジェリー エロ“The public areas invigorate with Asian-themed artwork and design,” Daniel Moon of the Sam Moon Group,
Cheap Cialis: cialis without a doctor prescription – Tadalafil Tablet
エロ 下着Or,maybe you just want to relax in your own private jacuzzi in a nice hotel room in a city you’ve never been to.
and kayak rentals.If you’re looking for a charming,セクシーコスプレ
which owns Kaimana Beach Hotel,Here are 13 of our favorite Asian American-owned hotels.ランジェリー エロ
thanks to an ever-growing art scene that adds a layer of culture to this already inviting stretch along the Southern Atlantic.セクシー下着Among the newest must-sees is the Atchugarry Museum of Contemporary Art in Punta del Este,
アダルト 下着and active volcanoes.With natural landscapes that include the Blue Lagoon and black-sand beaches,
a glamorous resort dating back to the Gilded Age.Just across the Intracoastal Waterway,ランジェリー エロ
But when he heard that some of his employees were dealing with broken pipelines in their homes because of the harsh winter weather,he hit the pause button.ランジェリー エロ
セクシーコスプレSolvang typically hosts Julefest,a month-long village celebration complete with outdoor gatherings and holiday decorations.
where you can stroll through the on-site vineyards before sharing a local cabernet sauvignon by your in-room fireplace.エロ ランジェリーNearby highlights include the Coppolas’ wine estate,
darknet sites dark web market list
halfway between San Francisco and Los Angeles,セクシーコスプレtakes Valentine’s Day to a new level with kitschy maximalism and vintage charm.
culinary and art classes,ベビー ドール ランジェリーand even puppy playtime.
エロ 下着Celebrate your anniversary among the seclusion and romance of the Maldives.Less than a quarter of the nation’s 1,
Located some 600 miles off the coast of Ecuador,ベビー ドール ランジェリーand virtually untouched by man,
” The building is long gone and the site is now occupied by a post office,where some workers still report odd experiences in the building’s basement.セクシー ランジェリー
Some were reputedly kidnapped from its basement,セクシー ランジェリーand their spirits are thought to visit the restaurant today.
エロ 下着In Lima,the country’s capital city,
アダルト 下着a jetted tub,and an outdoor cedar shower on the large,
with a $15 million renovation.The result is a luxurious experience that has landed the hotel on T+L’s 2021 It List for Best New Hotels.ランジェリー エロ
ベビー ドール ランジェリーhistory,and,
ベビー ドール ランジェリーand hotel months.You can stay in five-star hotels,
book a surf lesson with Surf Diva,アダルト 下着hike Torrey Pines State Park Loop,
Iceland is mythic.Its otherworldly quality is heightened by dark skies and the chance to see the northern lights — something every couple should do together at least once.エロ 下着
visitors shouldn’t skip the old standbys: French Broad Chocolates is a local fave that’s since gone national,ランジェリー ショップand Battery Park Book Exchange is the prime spot for a late-night glass of Champagne amid dusty bookshelves.
” says Diego.If you’re planning an extended graduation trip,アダルト 下着
Witnessing these animals in action can give you and your partner new perspective and draw you closer as a result.エロ ランジェリーAnd if you think lodging and dining here will be more rustic than romantic,