透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
Use a soft sponge or cloth soaked in the soapy solution to gently えろ 人形clean the surface of the silicone sex doll.
ダッチワイフ violence,and abuse.
ラブドール オナホ” which means “delight.” Phallic artifacts have been found around the world and dated through just about every historic period.
After the adult doll is completely dry, you can apply a thin layer えろ 人形of renewing powder specifically designed for silicone sex dolls.
ラブドール オナホparticularly on narrowing the orgasm gap and female anatomy.Both men and women are eager to find ways to enhance female sexual pleasure,
ラブドール 中古and I am confident that you will want to hear what I have to say.”It is never too late to learn how to communicate in a straightforward way that expresses your position and reaches out to others with empathy and compassion.
Also, seeing something new and innovative like Cooby Doll’s エロ 人形oral cleaning reminds me that brands still have the passion to innovate.
really expensive) treatment got us to realize we needed to address the issues in our relationship instead of relying on some “miracle massage” to fix them.人形 エロSo while the treatment probably did not bond our chakras (sorry,
grappling with dissatisfaction in their sexual 人形エロlives, or harboring a strong yearning for intimate connections.
When you’re just beginning to date, it can be hard to bring up your deepest, えろ 人形hottest, most out there fantasies, desires and tastes. Everyone fears rejection and the
Elsa Babe returned after a long break, WM Doll’s “Bimbo doll”エロ 人形 is almost ready for release, some pretty smiling heads, and a new method of oral cavity cleaning?
Almost 1 year in the making with a 41-page thread on TDF, WM Doll (and The Doll Laboratory) areエロ 人形 preparing to release their latest 158cm “Bimbo Doll.”
Профессиональный сервисный центр по ремонту планшетов в том числе Apple iPad.
Мы предлагаем: ремонт айпадов москва
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Do you mind if I quote a couple of your articles as long as I provide credit
and sources back to your blog? My website is in the
exact same niche as yours and my visitors would really benefit from some of the information you provide here.
Please let me know if this alright with you.
Thanks!
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем:сервисные центры в уфе
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту посудомоечных машин с выездом на дом в Москве.
Мы предлагаем: ремонт посудомоечных машин москва
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
I used to be able to find good information from your
content.
15 Up-And-Coming Latest Sport Toto Result Bloggers You Need To Be Keeping An Eye On 토토사이트
Arrowheads reveal the presence of a mysterious army in Europe’s oldest battle
гей порно член
Today, the lush, green valley surrounding the Tollense River in northeast Germany appears to be a serene place to appreciate nature.
But to archaeologists, the Tollense Valley is considered Europe’s oldest battlefield.
An amateur archaeologist first spotted a bone sticking out of the riverbank in 1996.
A series of ongoing site excavations since 2008 has shown that the thousands of bones and hundreds of weapons preserved by the valley’s undisturbed environment were part of a large-scale battle 3,250 years ago.
The biggest mysteries that researchers aim to uncover are why the battle occurred and who fought in it. These are questions that they are now one step closer to answering.
ozens of bronze and flint arrowheads recovered from the Tollense Valley are revealing details about the able-bodied warriors who fought in the Bronze Age battle.
The research team analyzed and compared the arrowheads, some of which were still embedded in the remains of the fallen. While many of these weapons were locally produced, some bearing different shapes came from a region that now includes modern Bavaria and Moravia.
The outliers’ presence suggests that a southern army clashed with local tribes in the valley, and researchers suspect the conflict began at a key landmark along the river.
Back to the future
Scientists are harnessing the power of artificial intelligence to detect hidden archaeological sites buried below the sand of the sprawling Rub‘ al-Khali desert.
The desert spans 250,000 square miles (650,000 square kilometers) on the Arabian Peninsula, and its name translates to “the Empty Quarter” in English. To unravel the secrets of the desolate terrain, researchers are combining machine learning with a satellite imagery technique that uses radio waves to spot objects that may be concealed beneath surfaces.
The technology will be tested in October when excavations assess whether predicted structures are present at the Saruq Al Hadid complex in Dubai, United Arab Emirates.
Separately, an AI-assisted analysis uncovered a trove of ancient symbols in Peru’s Nazca Desert, nearly doubling the number of known geoglyphs, or stone and gravel arranged into giant shapes that depict animals, humans and geometric designs.
снять проститутку снять проститутку .
Feel free to visit my website Explore Daycares Locations
Профессиональный сервисный центр по ремонту МФУ в Москве.
Мы предлагаем: ремонт платы мфу
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту МФУ в Москве.
Мы предлагаем: ремонт мфу цены
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
purple pharmacy mexico price list: mexican pharma – mexico drug stores pharmacies
Профессиональный сервисный центр по ремонту посудомоечных машин с выездом на дом в Москве.
Мы предлагаем: мелкий ремонт посудомоечных машин
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
How Adult Adhd Assessment Uk Was The Most Talked About Trend In 2023 adhd Assessment Uk adults
Профессиональный сервисный центр по ремонту посудомоечных машин с выездом на дом в Москве.
Мы предлагаем: замена помпы в посудомоечной машине стоимость
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Сервисный центр предлагает ремонт холодильника hansa на дому ремонт холодильника hansa адреса
“Perceptions of beauty as power.ラブドール オナホ Many discussed lookism and yearned for the power of beauty.
actor,or athlete is more likely to nail a difficult performance if they have practiced,ラブドール おすすめ