透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
This development has significant consequences for sexual ラブドール sexliberation and expression, particularly benefiting those who might feel sidelined or overlooked in conventional sexual scenarios.
This allows them to take part in simple chats ラブドール sexand react to different situations, making it even harder to distinguish between what’s alive and what’s not.
15 Reasons You Must Love Mesothelioma Asbestos Claims cassylawn.top
allowing for a more personalized experienceirontech doll.
Nonetheless, it lacks left-to-right movement 人形 えろin the wire fingers. Ideal for customers desiring substantial hand movements without requiring left-to-right mobility.
The growing interest in sex dolls in today’s society ラブドール sexmirrors shifts in how we view relationships and the changing scene of sexual satisfaction.
expanding the limits of what we thought could be achievedラブドール sex in terms of companionship with technology.
「その場で入手したい」「実物を見てから購入したい」という方には実店舗がおすすめ！セックス ロボット
As sex dolls become more lifelike and widely used, ラブドール sexthey force society to confront its attitudes toward human sexuality and the human body.
There are now many different types of sex dolls available.ラブドール sex It’s not just one kind anymore. You can find male and female dolls, even smaller ones, to suit different tastes.
including providing companionship to ラブドール オナニーindividuals who find conventional social interaction
市販のぬいぐるみ型ドールは買うと数万円もしてしまうので、セックス ロボット手間は掛かりますがエアドールの二次利用も兼ねて制作することをお勧めします。
societal, and psychological aspects involved. jydollThe key to shaping our future interactions lies in recognizing and valuing technology’s role in meeting our inherent desires for companionship and closeness.
choosing everything from hair color and eye shape to body type and facial features.irontech doll This level of customization extends to the doll’s personality traits programmed into the AI
20 Amazing Quotes About Double Glazing Window Locks Repairs jerealas.top
The market’s expansion is propelled by a ラブドール sexcombination of heightened consumer curiosity and significant advancements in material science and engineering
Hey would you mind stating which blog platform you’re using?
I’m looking to start my own blog in the near future but I’m having a hard
time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your design and style seems different then most blogs and I’m looking for something
completely unique. P.S My apologies for getting off-topic but I had to ask!
The 10 Most Terrifying Things About 2 In 1 Buggy 2 in 1 buggy (https://www.cheaperseeker.com/)
10 Of The Top Mobile Apps To Workers Compensation Litigation workers’ compensation law
firm (Jack)
классное порево бесплатно классное порево бесплатно .
I must thank you for the efforts you have put in writing this blog.
I really hope to view the same high-grade blog posts from you in the future as well.
In fact, your creative writing abilities has inspired me to get my own,
personal website now 😉
Guide To Affordable SEO Services London: The Intermediate Guide Towards Affordable SEO
Services London affordable seo services london
10 Tell-Tale Signs You Need To Get A New ADHD Undiagnosed
In Adults 9326527.xyz
Undeniably imagine that that you stated. Your favorite
reason seemed to be on the net the simplest factor to bear in mind
of. I say to you, I definitely get irked whilst folks think about concerns that
they just don’t understand about. You controlled
to hit the nail upon the highest and also outlined out the whole thing
with no need side effect , other people can take a signal.
Will likely be again to get more. Thank you
Here is my web site: 成人影片
like Chaser,ラブドール 画像that could learn manyor even any object names were few and far between.
The astronomer Carl Sagan famously cautioned,ラブドール 高級“Extraordinary claims require extraordinary evidence.
having a cat had no impact on rates of dementia.海外 セックスpet ownership is not common in Japan—only 9 percent of the participants had a dog and 6 percent lived with a cat.
leaders and executives are expected to lead efforts to improve workforce well-being and ensure that employees thrive,リアル ラブドールregardless of their own well-being.
Washington”I’m not great at social interactions,リアル セックスand dating has always been a nightmare for me.
I made it for the rest of the conference.エロドールYou are so needy.