nintendont
nectarboy
|
After Width: | Height: | Size: 475 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 428 KiB |
@@ -0,0 +1,3 @@
|
||||
all made using the website !
|
||||
use these if u want idc
|
||||
no credit needed but u can if u want :3
|
||||
@@ -1,10 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>((working title))</title>
|
||||
<title>Pride PFP Maker</title>
|
||||
<meta charset='utf-8'>
|
||||
|
||||
<link rel='stylesheet' href='src/index.css'>
|
||||
<link rel='shortcut icon' href='src/assets/favicon.png' type='image/png'>
|
||||
|
||||
<meta name='description' content='customize your PFPs with pride flags !'>
|
||||
<meta name='keywords' content='pride, pride pfp maker, pride icon maker, pride month, pride pfp, pride flag ring icon'>
|
||||
<meta name='author' content='github.com/nectarboy'>
|
||||
|
||||
<!-- PfpPride scripts -->
|
||||
<script src='src/pfppride/pfppride.js'></script>
|
||||
@@ -17,7 +22,10 @@
|
||||
<!-- Top bar -->
|
||||
<div class='topBar'>
|
||||
<div class='topSub'> <!-- stfu -->
|
||||
<span class='topTitle'>Pride PFP Generator | </span>
|
||||
<span class='topTitle'>
|
||||
<img src='src/assets/logo_24.png'>
|
||||
Pride PFP Maker |
|
||||
</span>
|
||||
<span class='topDesc'>customize your PFPs with pride flags ! v0.5</span>
|
||||
<br>
|
||||
|
||||
@@ -81,7 +89,11 @@
|
||||
<span>change the pride flag !</span>
|
||||
<hr class='line'>
|
||||
|
||||
<div id='flagButtonDiv' class='flagButtonDiv'></div> <!-- fuck tables >:( -->
|
||||
<!-- fuck tables >:( -->
|
||||
<div id='flagButtonDiv' class='flagButtonDiv'>
|
||||
<!-- Custom flag image input -->
|
||||
<input type='file' id='otherFlagInput' style='display: none'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -93,8 +105,8 @@
|
||||
|
||||
<!-- Settings -->
|
||||
<div class='bigLayer'>
|
||||
<!-- Custom flag image input -->
|
||||
<input type='file' id='otherFlagInput' style='display: none'>
|
||||
<span>more settings !</span>
|
||||
<hr class='line'>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -141,7 +153,7 @@
|
||||
img.onerror = () => alert('bitch the fuck did u give me !');
|
||||
|
||||
img.src = URL.createObjectURL(file); // set src to blob url
|
||||
};
|
||||
}
|
||||
|
||||
function onPfpUpload(img) {
|
||||
resetEditor();
|
||||
@@ -151,6 +163,19 @@
|
||||
selectDiv(editorDiv);
|
||||
}
|
||||
|
||||
var refreshing = false;
|
||||
const refreshCool = 250;
|
||||
function requestRefresh() {
|
||||
if (refreshing)
|
||||
return;
|
||||
refreshing = true;
|
||||
|
||||
setTimeout(() => {
|
||||
refreshing = false;
|
||||
editor.refreshCanvas();
|
||||
}, refreshCool);
|
||||
}
|
||||
|
||||
// editor
|
||||
var editor = null;
|
||||
function resetEditor() {
|
||||
|
||||
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 243 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 142 B |
|
After Width: | Height: | Size: 147 B |
|
After Width: | Height: | Size: 165 B |
|
After Width: | Height: | Size: 266 B |
@@ -84,8 +84,8 @@ class Editor {
|
||||
|
||||
this.ctx.drawImage(
|
||||
this.pfpImg,
|
||||
-(scaledWidth - this.pfpImg.width)/2 + this.pfpImgScale * this.pfpImgOffX,
|
||||
-(scaledHeight - this.pfpImg.height*widthHeightRatio)/2 + this.pfpImgScale * this.pfpImgOffY,
|
||||
-(scaledWidth - this.pfpImg.width)/2 + this.pfpImgOffX,
|
||||
-(scaledHeight - this.pfpImg.height*widthHeightRatio)/2 + this.pfpImgOffY,
|
||||
scaledWidth,
|
||||
scaledHeight
|
||||
);
|
||||
@@ -126,20 +126,29 @@ class Editor {
|
||||
}
|
||||
}
|
||||
|
||||
// settings
|
||||
centerImgScale() {
|
||||
this.pfpImgScale = (this.pfpImg.width > this.pfpImg.height)
|
||||
? this.pfpImg.width / this.pfpImg.height
|
||||
: this.pfpImg.height / this.pfpImg.width;
|
||||
}
|
||||
|
||||
fitImgScaleToRing() {
|
||||
this.centerImgScale();
|
||||
this.pfpImgScale *= this.pfpRingScale;
|
||||
}
|
||||
|
||||
resetSettingsDefault() {
|
||||
this.pfpImgOffX = 0;
|
||||
this.pfpImgOffY = 0;
|
||||
|
||||
this.pfpImgScale =
|
||||
this.pfpImg.width > this.pfpImg.height ?
|
||||
this.pfpImg.width / this.pfpImg.height :
|
||||
this.pfpImg.height / this.pfpImg.width;
|
||||
this.centerImgScale();
|
||||
|
||||
// pfp mode cases !
|
||||
switch (this.pfpMode) {
|
||||
case 0: {
|
||||
this.pfpRingScale = 0.875;
|
||||
this.pfpImgScale *= this.pfpRingScale;
|
||||
this.pfpRingScale = 0.9; // 0.9 for thin, 0.875 for thick
|
||||
this.fitImgScaleToRing();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||