透過網頁讀取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. 無法依圖層混合模式輸出圖片
解決方法：無法解決
buy medicines online in india reputable indian online pharmacy top 10 online pharmacy in india
Casino bonus offers are additional rewards offered by casinos, most commonly used as a way to attract online gamblers, but they are also used as a way to boost the player experience. They may come in many forms, most commonly as a Deposit Bonus, No Deposit Bonus, Free Spins Offer, Reload Bonus or Deposit Match Bonus, among other promotions. New players may also claim a Welcome Bonus upon placing their first deposit. The innovative website, the games on offer, and the generous new customer bonus are what makes EnergyCasino one of the best online casinos in the UK. Most online reviews about Energy Casino mention the collection of games, the free spins bonuses, and the slots tournaments. According to an EnergyCasino Review, there are quite a number of reasons why you can’t withdraw you EnergyCasino Bonus winnings. First and foremost, failure to wager the bonus within the stipulated time which is usually 30 days will result in forfeiture of the bonus and any eventual winnings. Additionally, withdrawing the bonuses before reaching the minimum requirements will result in voiding the bonus and winnings Also, The casino reserves the right to punitive measures including withholding and confiscation of bonus winnings in case of violation of the terms and conditions or if irregular playing patterns are noticed or if there is evidence of abuse or fraud.
http://spark-wiki.win/index.php?title=Casino_net_Canada
As far as the casino, you’ll find slots-galore, with over 2,000 different slot machines. There’s also a modest collection of table games, including blackjack and poker, as well as bingo and pull tabs. ©2023 Choctaw Casinos & Resorts All Rights Reserved. Located 60 miles (97 km) south of Portland, Spirit Mountain Casino is Oregon’s premier gaming destination. The casino boasts a fleet of table games such as blackjack, roulette, craps and pai gow. Additionally, it offers traditional and touch screen slot machines, a dedicated 24-hour poker room and the luxurious Spirit Mountain Lodge. In a moment, I’ll explain how to supercharge this approach. But first, let’s practice. To find candidate slot machines with my Strategy 9: Location, Location, Location, look for slot machines which can be seen from a distance.
best online pharmacies in mexico: mexican online pharmacies prescription drugs – purple pharmacy mexico price list
http://medicinefromindia.store/# indian pharmacy paypal
http://certifiedpharmacymexico.pro/# medicine in mexico pharmacies
indian pharmacy online п»їlegitimate online pharmacies india buy prescription drugs from india
https://certifiedpharmacymexico.pro/# mexican online pharmacies prescription drugs
mexican rx online reputable mexican pharmacies online mexico pharmacy
safe canadian pharmacy canadian family pharmacy canadapharmacyonline legit
Caesars Entertainment is the largest casino company in the United States. It has launched real money casino games in several states, including at NJ online casinos, Pennsylvania casinos and Michigan online casinos, and it is poised to expand across the country in the years ahead. Online casino referral bonuses are rewards given to players who refer their friends to sign up and play at an online casino. Referral bonuses are less common than welcome bonuses, but many real money online casinos offer them. There are two types of referral bonuses: cash bonuses and free play. Players must send their unique referral link to their friends via email or social media to claim a referral bonus. It’s a given that when you place a bet at a casino, you’re not going to win every time. To ensure that games are based on true luck and skill, trustworthy online casinos use special Random Number Generator (RNG) software that makes sure the results of games are completely random and fair. Malicious casino sites, however, do not employ RNG technology and heavily rigg their games in a way that players can almost never win.
https://secondstreet.ru/profile/ignelhanddis1986/
Not really. Bonus abuse is when an online casino player gets free money from an online casino by finding loopholes in the terms and conditions. Michigan online casinos have closed these loopholes (as far as we know), and simply making sure you follow the terms and conditions ensures you avoid being accused of bonus abuse. This article discussed online casinos with no minimum deposit, including their advantages and disadvantages and the available bonuses and promotions. In addition, we discussed how low deposit casinos could be a good option for players who want to gamble on a budget or try new casinos or games without risking too much money. A no deposit bonus works slightly differently, in that you’ll receive bonus credits rather than spins. You can play table games or video poker if the casino in question allows that, or stick to slots. Again, you’ll have to meet the terms if you want to claim your winnings. However, the wagering requirement can often be lower for a no deposit bonus than for free spins.
https://medicinefromindia.store/# mail order pharmacy india
İl Emniyet Müdürlüğü’nde görevli 21 polis müdürü ve emniyet amiri başka illere tayin edilirken 7 emniyet müdürü ile 5 emniyet amiri İstanbul’a atandı New players at Lincoln Casino are welcomed with offers to claim a No Deposit Bonus and a 100% Welcome Deposit Bonus. From the two Welcome Bonuses for new players at Lincoln Casino, with as little as $25 you will get $65 to play at the casino. This opportunity increases your chances to win even more real money! There was no cutting corners when it came to designing the website. The rich deep colors of blue add a depth that is as intriguing as the depth of the sea. Access the games in Instant Play or by downloading the software. Easy navigation is possible with appropriate tabs and a FAQ page that will answer the most common questions players may have. There is no guess work in understanding the VIP program, Tournament schedule, Promotions or Games with quick access to all your curiosities. Mini reviews of games are explained as you explore the list of products. Games are available to play in free mode to determine your favorites before making a deposit.
https://zionhhec851852.azzablog.com/20574542/governor-of-poker-full-version-online
Commenting on the new milestone, Jean-Christophe Choffray, Head of Gaming at Casino777.be, says that the company’s commitment to their customers means they are always updating their portfolio of game providers to feature the best talent in the sector. Running on the Gaming1 tech platform, Casino777.be has been working very hard to build its brand identity, regularly extending its library to include the latest trends in design, UX and graphics. Its site is available in four languages and is devoted to creating a diverse gaming engagement that places customer satisfaction and safety first. iGaming content provider Play’n GO has taken its content live with Dutch online casino operator Casino 777.nl. Under the terms of the new deal, Dutch players will gain access to the supplier’s games, including Book of Dead, Rich Wilde and the Tome of Madness, and Reactoonz.
https://canadianinternationalpharmacy.pro/# best online canadian pharmacy
viagra without a doctor prescription cialis without a doctor prescription cialis without doctor prescription
https://canadianinternationalpharmacy.pro/# pharmacy canadian superstore
Full review of Yebo Casino 2022, play RTG games, 130+ titles, WB R12,000, read the casino bonus, games, bank services, & know if Yebo Casino suit you 2. Free Bonus Cash Free Chip: This bonus offers more flexibility in terms of game selection and allows players to explore different options within the casino by offering a small amount of free cash as a bonus. New post, kelly15268 replied to June 5th – Weekly Winners If you are an existing player at Yebo, then no doubt you have received numerous no deposit coupons from our promotions team. These coupons are available every week and take the form of no deposit cash, such as R200 free or free spins coupons in the no deposit bonus category. Again, these no deposit bonuses are only available to players from South Africa, Swaziland, Lesotho and Namibia. Often the promotions team will mix deposit bonuses with no-deposit bonuses as a package. For example, deposit R1,000 and get 100% match bonus. Plus, once you have completed playing with the deposit bonus, you will receive the no deposit bonus automatically.
https://turkeysportsbetting.blogspot.com/2022/10/situs-judi-slot-online.html
Are you someone who loves the excitement of real money casino games but doesn’t have the time to visit a physical casino? If so, the best online casinos may be the solution you’ve been searching for. Whether you prefer roulette, cards, or slots, online real-money casinos allow you to play all of your favorite games from the comfort of your own home. There are no legal real money online casinos in Ohio. All legislative attention is focused on sports betting, but casino games could soon follow. Four of the five states that border Ohio offer legal online gambling options. When Ohio does green-light online gaming, casinos and racinos in the state will be a part of it. BetMGM casino is one of the most well-known casinos, and BetMGM Ontario Online Casino is now live in the province. BetMGM Casino is one of the top Ontario online casino brands for a number of reasons. First off, there is a huge selection of games, and many of them are exclusive to BetMGM Ontario. Second, you can rack up M life rewards points, which you can then use to play games, as well as use them at MGM Resorts International. There is the MGM Grand Detroit, which is just across the bridge from Windsor, for example. And third, BetMGM Casino is just a very reputable brand and is trusted for delivering the best gaming entertainment to its clients.
mexican online pharmacies prescription drugs: mexican online pharmacies prescription drugs – mexican border pharmacies shipping to usa
best ed drugs ed pills that really work best male enhancement pills
ed pills ed pills online generic ed drugs
http://edpill.cheap/# erection pills viagra online
http://certifiedpharmacymexico.pro/# buying from online mexican pharmacy
prescription drugs online without cialis without a doctor prescription buy prescription drugs from india
pharmacy website india: indian pharmacy – indian pharmacy online
Отличный сайт! Всем рекомендую!купить аттестат
п»їlegitimate online pharmacies india: top 10 online pharmacy in india – top 10 online pharmacy in india
http://certifiedpharmacymexico.pro/# mexico pharmacy
pharmacy website india top online pharmacy india india online pharmacy
https://medicinefromindia.store/# buy medicines online in india
medicine for erectile best non prescription ed pills pills for ed
http://medicinefromindia.store/# world pharmacy india