Kemonogen komplett überarbeitet
This commit is contained in:
parent
a0b945e708
commit
7dcfa38e8d
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,2 @@
|
|||||||
/checkwave
|
/checkwave
|
||||||
/kemonogen
|
|
||||||
/shape_shifter
|
/shape_shifter
|
||||||
|
|||||||
188
kemonogen/FileSaver.js
Normal file
188
kemonogen/FileSaver.js
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
/* FileSaver.js
|
||||||
|
* A saveAs() FileSaver implementation.
|
||||||
|
* 1.3.2
|
||||||
|
* 2016-06-16 18:25:19
|
||||||
|
*
|
||||||
|
* By Eli Grey, http://eligrey.com
|
||||||
|
* License: MIT
|
||||||
|
* See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*global self */
|
||||||
|
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
|
||||||
|
|
||||||
|
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
|
||||||
|
|
||||||
|
var saveAs = saveAs || (function(view) {
|
||||||
|
"use strict";
|
||||||
|
// IE <10 is explicitly unsupported
|
||||||
|
if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var
|
||||||
|
doc = view.document
|
||||||
|
// only get URL when necessary in case Blob.js hasn't overridden it yet
|
||||||
|
, get_URL = function() {
|
||||||
|
return view.URL || view.webkitURL || view;
|
||||||
|
}
|
||||||
|
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
|
||||||
|
, can_use_save_link = "download" in save_link
|
||||||
|
, click = function(node) {
|
||||||
|
var event = new MouseEvent("click");
|
||||||
|
node.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
, is_safari = /constructor/i.test(view.HTMLElement) || view.safari
|
||||||
|
, is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
|
||||||
|
, throw_outside = function(ex) {
|
||||||
|
(view.setImmediate || view.setTimeout)(function() {
|
||||||
|
throw ex;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
, force_saveable_type = "application/octet-stream"
|
||||||
|
// the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
|
||||||
|
, arbitrary_revoke_timeout = 1000 * 40 // in ms
|
||||||
|
, revoke = function(file) {
|
||||||
|
var revoker = function() {
|
||||||
|
if (typeof file === "string") { // file is an object URL
|
||||||
|
get_URL().revokeObjectURL(file);
|
||||||
|
} else { // file is a File
|
||||||
|
file.remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
setTimeout(revoker, arbitrary_revoke_timeout);
|
||||||
|
}
|
||||||
|
, dispatch = function(filesaver, event_types, event) {
|
||||||
|
event_types = [].concat(event_types);
|
||||||
|
var i = event_types.length;
|
||||||
|
while (i--) {
|
||||||
|
var listener = filesaver["on" + event_types[i]];
|
||||||
|
if (typeof listener === "function") {
|
||||||
|
try {
|
||||||
|
listener.call(filesaver, event || filesaver);
|
||||||
|
} catch (ex) {
|
||||||
|
throw_outside(ex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
, auto_bom = function(blob) {
|
||||||
|
// prepend BOM for UTF-8 XML and text/* types (including HTML)
|
||||||
|
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
|
||||||
|
if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
|
||||||
|
return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
|
||||||
|
}
|
||||||
|
return blob;
|
||||||
|
}
|
||||||
|
, FileSaver = function(blob, name, no_auto_bom) {
|
||||||
|
if (!no_auto_bom) {
|
||||||
|
blob = auto_bom(blob);
|
||||||
|
}
|
||||||
|
// First try a.download, then web filesystem, then object URLs
|
||||||
|
var
|
||||||
|
filesaver = this
|
||||||
|
, type = blob.type
|
||||||
|
, force = type === force_saveable_type
|
||||||
|
, object_url
|
||||||
|
, dispatch_all = function() {
|
||||||
|
dispatch(filesaver, "writestart progress write writeend".split(" "));
|
||||||
|
}
|
||||||
|
// on any filesys errors revert to saving with object URLs
|
||||||
|
, fs_error = function() {
|
||||||
|
if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
|
||||||
|
// Safari doesn't allow downloading of blob urls
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onloadend = function() {
|
||||||
|
var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
|
||||||
|
var popup = view.open(url, '_blank');
|
||||||
|
if(!popup) view.location.href = url;
|
||||||
|
url=undefined; // release reference before dispatching
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch_all();
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(blob);
|
||||||
|
filesaver.readyState = filesaver.INIT;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// don't create more object URLs than needed
|
||||||
|
if (!object_url) {
|
||||||
|
object_url = get_URL().createObjectURL(blob);
|
||||||
|
}
|
||||||
|
if (force) {
|
||||||
|
view.location.href = object_url;
|
||||||
|
} else {
|
||||||
|
var opened = view.open(object_url, "_blank");
|
||||||
|
if (!opened) {
|
||||||
|
// Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
|
||||||
|
view.location.href = object_url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch_all();
|
||||||
|
revoke(object_url);
|
||||||
|
}
|
||||||
|
;
|
||||||
|
filesaver.readyState = filesaver.INIT;
|
||||||
|
|
||||||
|
if (can_use_save_link) {
|
||||||
|
object_url = get_URL().createObjectURL(blob);
|
||||||
|
setTimeout(function() {
|
||||||
|
save_link.href = object_url;
|
||||||
|
save_link.download = name;
|
||||||
|
click(save_link);
|
||||||
|
dispatch_all();
|
||||||
|
revoke(object_url);
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fs_error();
|
||||||
|
}
|
||||||
|
, FS_proto = FileSaver.prototype
|
||||||
|
, saveAs = function(blob, name, no_auto_bom) {
|
||||||
|
return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
|
||||||
|
}
|
||||||
|
;
|
||||||
|
// IE 10+ (native saveAs)
|
||||||
|
if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
|
||||||
|
return function(blob, name, no_auto_bom) {
|
||||||
|
name = name || blob.name || "download";
|
||||||
|
|
||||||
|
if (!no_auto_bom) {
|
||||||
|
blob = auto_bom(blob);
|
||||||
|
}
|
||||||
|
return navigator.msSaveOrOpenBlob(blob, name);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
FS_proto.abort = function(){};
|
||||||
|
FS_proto.readyState = FS_proto.INIT = 0;
|
||||||
|
FS_proto.WRITING = 1;
|
||||||
|
FS_proto.DONE = 2;
|
||||||
|
|
||||||
|
FS_proto.error =
|
||||||
|
FS_proto.onwritestart =
|
||||||
|
FS_proto.onprogress =
|
||||||
|
FS_proto.onwrite =
|
||||||
|
FS_proto.onabort =
|
||||||
|
FS_proto.onerror =
|
||||||
|
FS_proto.onwriteend =
|
||||||
|
null;
|
||||||
|
|
||||||
|
return saveAs;
|
||||||
|
}(
|
||||||
|
typeof self !== "undefined" && self
|
||||||
|
|| typeof window !== "undefined" && window
|
||||||
|
|| this.content
|
||||||
|
));
|
||||||
|
// `self` is undefined in Firefox for Android content script context
|
||||||
|
// while `this` is nsIContentFrameMessageManager
|
||||||
|
// with an attribute `content` that corresponds to the window
|
||||||
|
|
||||||
|
if (typeof module !== "undefined" && module.exports) {
|
||||||
|
module.exports.saveAs = saveAs;
|
||||||
|
} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
|
||||||
|
define("FileSaver.js", function() {
|
||||||
|
return saveAs;
|
||||||
|
});
|
||||||
|
}
|
||||||
BIN
kemonogen/background.jpg
Normal file
BIN
kemonogen/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 726 KiB |
125
kemonogen/canvas-toBlob.js
Normal file
125
kemonogen/canvas-toBlob.js
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
/* canvas-toBlob.js
|
||||||
|
* A canvas.toBlob() implementation.
|
||||||
|
* 2016-05-26
|
||||||
|
*
|
||||||
|
* By Eli Grey, http://eligrey.com and Devin Samarin, https://github.com/eboyjr
|
||||||
|
* License: MIT
|
||||||
|
* See https://github.com/eligrey/canvas-toBlob.js/blob/master/LICENSE.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*global self */
|
||||||
|
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
|
||||||
|
plusplus: true */
|
||||||
|
|
||||||
|
/*! @source http://purl.eligrey.com/github/canvas-toBlob.js/blob/master/canvas-toBlob.js */
|
||||||
|
|
||||||
|
(function(view) {
|
||||||
|
"use strict";
|
||||||
|
var
|
||||||
|
Uint8Array = view.Uint8Array
|
||||||
|
, HTMLCanvasElement = view.HTMLCanvasElement
|
||||||
|
, canvas_proto = HTMLCanvasElement && HTMLCanvasElement.prototype
|
||||||
|
, is_base64_regex = /\s*;\s*base64\s*(?:;|$)/i
|
||||||
|
, to_data_url = "toDataURL"
|
||||||
|
, base64_ranks
|
||||||
|
, decode_base64 = function(base64) {
|
||||||
|
var
|
||||||
|
len = base64.length
|
||||||
|
, buffer = new Uint8Array(len / 4 * 3 | 0)
|
||||||
|
, i = 0
|
||||||
|
, outptr = 0
|
||||||
|
, last = [0, 0]
|
||||||
|
, state = 0
|
||||||
|
, save = 0
|
||||||
|
, rank
|
||||||
|
, code
|
||||||
|
, undef
|
||||||
|
;
|
||||||
|
while (len--) {
|
||||||
|
code = base64.charCodeAt(i++);
|
||||||
|
rank = base64_ranks[code-43];
|
||||||
|
if (rank !== 255 && rank !== undef) {
|
||||||
|
last[1] = last[0];
|
||||||
|
last[0] = code;
|
||||||
|
save = (save << 6) | rank;
|
||||||
|
state++;
|
||||||
|
if (state === 4) {
|
||||||
|
buffer[outptr++] = save >>> 16;
|
||||||
|
if (last[1] !== 61 /* padding character */) {
|
||||||
|
buffer[outptr++] = save >>> 8;
|
||||||
|
}
|
||||||
|
if (last[0] !== 61 /* padding character */) {
|
||||||
|
buffer[outptr++] = save;
|
||||||
|
}
|
||||||
|
state = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 2/3 chance there's going to be some null bytes at the end, but that
|
||||||
|
// doesn't really matter with most image formats.
|
||||||
|
// If it somehow matters for you, truncate the buffer up outptr.
|
||||||
|
return buffer;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
if (Uint8Array) {
|
||||||
|
base64_ranks = new Uint8Array([
|
||||||
|
62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1
|
||||||
|
, -1, -1, 0, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
|
||||||
|
, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
|
||||||
|
, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35
|
||||||
|
, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
if (HTMLCanvasElement && (!canvas_proto.toBlob || !canvas_proto.toBlobHD)) {
|
||||||
|
if (!canvas_proto.toBlob)
|
||||||
|
canvas_proto.toBlob = function(callback, type /*, ...args*/) {
|
||||||
|
if (!type) {
|
||||||
|
type = "image/png";
|
||||||
|
} if (this.mozGetAsFile) {
|
||||||
|
callback(this.mozGetAsFile("canvas", type));
|
||||||
|
return;
|
||||||
|
} if (this.msToBlob && /^\s*image\/png\s*(?:$|;)/i.test(type)) {
|
||||||
|
callback(this.msToBlob());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var
|
||||||
|
args = Array.prototype.slice.call(arguments, 1)
|
||||||
|
, dataURI = this[to_data_url].apply(this, args)
|
||||||
|
, header_end = dataURI.indexOf(",")
|
||||||
|
, data = dataURI.substring(header_end + 1)
|
||||||
|
, is_base64 = is_base64_regex.test(dataURI.substring(0, header_end))
|
||||||
|
, blob
|
||||||
|
;
|
||||||
|
if (Blob.fake) {
|
||||||
|
// no reason to decode a data: URI that's just going to become a data URI again
|
||||||
|
blob = new Blob
|
||||||
|
if (is_base64) {
|
||||||
|
blob.encoding = "base64";
|
||||||
|
} else {
|
||||||
|
blob.encoding = "URI";
|
||||||
|
}
|
||||||
|
blob.data = data;
|
||||||
|
blob.size = data.length;
|
||||||
|
} else if (Uint8Array) {
|
||||||
|
if (is_base64) {
|
||||||
|
blob = new Blob([decode_base64(data)], {type: type});
|
||||||
|
} else {
|
||||||
|
blob = new Blob([decodeURIComponent(data)], {type: type});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
callback(blob);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!canvas_proto.toBlobHD && canvas_proto.toDataURLHD) {
|
||||||
|
canvas_proto.toBlobHD = function() {
|
||||||
|
to_data_url = "toDataURLHD";
|
||||||
|
var blob = this.toBlob();
|
||||||
|
to_data_url = "toDataURL";
|
||||||
|
return blob;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
canvas_proto.toBlobHD = canvas_proto.toBlob;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
|
||||||
BIN
kemonogen/card.png
Normal file
BIN
kemonogen/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
kemonogen/fonts/Play-Bold.ttf
Normal file
BIN
kemonogen/fonts/Play-Bold.ttf
Normal file
Binary file not shown.
BIN
kemonogen/fonts/dejima-mincho-r227.ttf
Normal file
BIN
kemonogen/fonts/dejima-mincho-r227.ttf
Normal file
Binary file not shown.
BIN
kemonogen/fonts/japarifont.woff
Normal file
BIN
kemonogen/fonts/japarifont.woff
Normal file
Binary file not shown.
303
kemonogen/index.html
Normal file
303
kemonogen/index.html
Normal file
@ -0,0 +1,303 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf8">
|
||||||
|
<title>Kemono Friends Logo Generator</title>
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: "japarifont";
|
||||||
|
src: url("fonts/japarifont.woff");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "DejimaMincho";
|
||||||
|
src: url("fonts/dejima-mincho-r227.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "PlayBold";
|
||||||
|
src: url("fonts/Play-Bold.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
padding-bottom: 70px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background-image: url("background.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savanna {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 35px;
|
||||||
|
color: #ffe663;
|
||||||
|
text-shadow: 0 0 10px black;
|
||||||
|
font-family: japarifont;
|
||||||
|
margin: 20px;
|
||||||
|
word-wrap: normal;
|
||||||
|
word-break: keep-all;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px black;
|
||||||
|
font-family: PlayBold;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
margin: 0;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: #ffad65;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover {
|
||||||
|
color: #ffe663;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .resources {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .author {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs span {
|
||||||
|
color: #ffad65;
|
||||||
|
text-shadow: 0 0 8px black, 0 0 8px black, 0 0 8px black;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs input[type=text] {
|
||||||
|
max-width: 40em;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.4em;
|
||||||
|
margin: 0.1em;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.2em;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs button {
|
||||||
|
font-family: sans-serif;
|
||||||
|
padding: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
color: white;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
border: solid 1px white;
|
||||||
|
transition-property: all;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs button:hover {
|
||||||
|
background-color: rgba(100, 100, 100, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs button:active {
|
||||||
|
transform: scale(0.90);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs p {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 0.5em rgba(0, 0, 0, 1.0), 0 0 0.5em rgba(0, 0, 0, 1.0), 0 0 0.5em rgba(0, 0, 0, 1.0);
|
||||||
|
margin: 4px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
margin: 0.5em;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "Yu Mincho", DejimaMincho;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.0em;
|
||||||
|
height: 1em;
|
||||||
|
padding: 0.1em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top .char {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top .char .upper {
|
||||||
|
position: absolute;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top .char .lower {
|
||||||
|
position: absolute;
|
||||||
|
-webkit-text-stroke-color: white;
|
||||||
|
-webkit-text-stroke-width: 0.35em;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin: 0.5em;
|
||||||
|
font-family: PlayBold;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 25px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 1.0em;
|
||||||
|
line-height: 1.0em;
|
||||||
|
display: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom .upper {
|
||||||
|
position: relative;
|
||||||
|
top: -1.0em;
|
||||||
|
color: #977a2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom .lower {
|
||||||
|
-webkit-text-stroke-color: white;
|
||||||
|
-webkit-text-stroke-width: 0.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
font-size: 120px;
|
||||||
|
margin: 10px;
|
||||||
|
position: relative;
|
||||||
|
font-family: japarifont;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle .char {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle .char .primary {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
color: limegreen;
|
||||||
|
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle .char .secondary {
|
||||||
|
position: absolute;
|
||||||
|
color: green;
|
||||||
|
text-shadow: 0 0 0.06em rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle .char .lower {
|
||||||
|
position: absolute;
|
||||||
|
-webkit-text-stroke-color: white;
|
||||||
|
-webkit-text-stroke-width: 0.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img#result {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img#result:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="icon" href="card.png">
|
||||||
|
<script src="index.js"></script>
|
||||||
|
<script src="canvas-toBlob.js"></script>
|
||||||
|
<script src="FileSaver.js"></script>
|
||||||
|
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="kemonogen"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container savanna">
|
||||||
|
<div class="preview noselect">
|
||||||
|
<img id="result" />
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="lower"></div>
|
||||||
|
<div class="upper"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="inputs">
|
||||||
|
<h1>Kemono Friends Logo Generator</h1>
|
||||||
|
<span>↓ Gib hier deinen Text ein!</span>
|
||||||
|
<input id="top" type="text" placeholder="Oberer Text" />
|
||||||
|
<input id="middle" type="text" placeholder="Mittlerer Text" />
|
||||||
|
<input id="bottom" type="text" placeholder="Unterer Text" />
|
||||||
|
<p>Wenn du fertig bist, klicke auf <button id="download" download="kemono-friends-logo.png">Logo herunterladen!</button> um dein Bild zu speichern!</p>
|
||||||
|
<p>Auf dem Smartphone kannst du das Logo auch durch langes Drücken teilen oder einen Screenshot machen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="credits">
|
||||||
|
<p class="resources">Fonts: <a target="_blank" href="http://getsuren.com/killgoU.html">KillgoU</a>, <a target="_blank" href="https://code.google.com/archive/p/dejima-fonts/">Dejima Mincho</a>, <a target="_blank" href="https://fonts.google.com/specimen/Play">Play</a></p>
|
||||||
|
<p class="author">Entwickelt von <a href="https://twitter.com/cubbit2">@cubbit2</a> | Übersetzt und angepasst von Akamaru</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
270
kemonogen/index.js
Normal file
270
kemonogen/index.js
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
window.onload = function(){
|
||||||
|
|
||||||
|
var seed = {
|
||||||
|
x: (2147483648 * Math.random()) | 0,
|
||||||
|
y: (2147483648 * Math.random()) | 0,
|
||||||
|
z: (2147483648 * Math.random()) | 0,
|
||||||
|
w: (2147483648 * Math.random()) | 0
|
||||||
|
};
|
||||||
|
function randomInt(xors) {
|
||||||
|
var t = xors.x ^ (xors.x << 11);
|
||||||
|
xors.x = xors.y;
|
||||||
|
xors.y = xors.z;
|
||||||
|
xors.z = xors.w;
|
||||||
|
return xors.w = (xors.w^(xors.w>>>19))^(t^(t>>>8));
|
||||||
|
}
|
||||||
|
function random(xors) {
|
||||||
|
return randomInt(xors) / 2147483648;
|
||||||
|
}
|
||||||
|
function shuffle(xs){
|
||||||
|
var v = Object.assign({}, seed);
|
||||||
|
var xs = xs.slice();
|
||||||
|
var ys = [];
|
||||||
|
while(0 < xs.length){
|
||||||
|
var i = Math.abs(randomInt(v)) % xs.length;
|
||||||
|
ys.push(xs[i]);
|
||||||
|
xs.splice(i, 1);
|
||||||
|
}
|
||||||
|
return ys;
|
||||||
|
}
|
||||||
|
|
||||||
|
var colorTuples = shuffle([
|
||||||
|
["#16ae67", "#90c31f"],
|
||||||
|
["#ea5421", "#f39800"],
|
||||||
|
["#00ac8e", "#e4007f"],
|
||||||
|
["#227fc4", "#00a1e9"],
|
||||||
|
["#9fa0a0", "#c9caca"],
|
||||||
|
["#e60013", "#f39800"],
|
||||||
|
["#c3d600", "#a42e8c"]
|
||||||
|
]);
|
||||||
|
|
||||||
|
var topColors = shuffle(["#04ad8f", "#a6ce48", "#f3a118", "#ea6435", "#17b297", "#e30983", "#2782c4", "#1aa6e7", "#b5b5b5", "#f29905", "#e50011", "#ccdc26", "#a5328d", "#0aaa60", "#91c423", "#f29300", "#ec5f69", "#22b69e", "#e63e9b", "#917220"]);
|
||||||
|
|
||||||
|
|
||||||
|
var topInput = document.querySelector("#top");
|
||||||
|
var middleInput = document.querySelector("#middle");
|
||||||
|
var bottomInput = document.querySelector("#bottom");
|
||||||
|
|
||||||
|
var top = document.querySelector(".top");
|
||||||
|
var middle = document.querySelector(".middle");
|
||||||
|
var bottom = document.querySelector(".bottom");
|
||||||
|
|
||||||
|
var foreground = document.getElementById("foreground");
|
||||||
|
var image = document.getElementById("result");
|
||||||
|
|
||||||
|
var container = document.querySelector(".container");
|
||||||
|
var download = document.getElementById("download");
|
||||||
|
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
var g = canvas.getContext("2d");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function update(){
|
||||||
|
setTimeout(function(){
|
||||||
|
setText(topInput.value, middleInput.value, bottomInput.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
middleInput.addEventListener("change", update);
|
||||||
|
middleInput.addEventListener("keydown", update);
|
||||||
|
topInput.addEventListener("change", update);
|
||||||
|
topInput.addEventListener("keydown", update);
|
||||||
|
bottomInput.addEventListener("change", update);
|
||||||
|
bottomInput.addEventListener("keydown", update);
|
||||||
|
|
||||||
|
function setText(topText, middleText, bottomText){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var topTextSize = 30;
|
||||||
|
var topMiddlePadding = 30;
|
||||||
|
var middleTextSize = 120;
|
||||||
|
var middleBottomPadding = 20;
|
||||||
|
var bottomTextSize = 30;
|
||||||
|
var margin = 60;
|
||||||
|
var bottomTextLetterSpacing = 20;
|
||||||
|
|
||||||
|
var topTextFont = `normal bold ${topTextSize}px/2 "Yu Mincho"`;
|
||||||
|
var middleTextFont = `normal 400 ${middleTextSize}px/2 japarifont`;
|
||||||
|
var bottomTextFont = `normal 400 ${bottomTextSize}px/2 PlayBold`;
|
||||||
|
|
||||||
|
// resize canvas
|
||||||
|
g.font = topTextFont;
|
||||||
|
var topMetrics = g.measureText(topText);
|
||||||
|
g.font = middleTextFont;
|
||||||
|
var middleMetrics = g.measureText(middleText);
|
||||||
|
g.font = bottomTextFont;
|
||||||
|
var bottomMetrics = g.measureText(bottomText);
|
||||||
|
canvas.width = margin + Math.max(
|
||||||
|
topMetrics.width,
|
||||||
|
middleMetrics.width,
|
||||||
|
bottomMetrics.width + bottomTextLetterSpacing * (bottomText.length - 1)
|
||||||
|
) + margin;
|
||||||
|
canvas.height = margin + topTextSize + topMiddlePadding + middleTextSize + middleBottomPadding + bottomTextSize + margin;
|
||||||
|
|
||||||
|
// prepare canvas
|
||||||
|
g.save();
|
||||||
|
g.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
g.textBaseline = "top";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// stroke top text
|
||||||
|
function iterate(callback){
|
||||||
|
var xors = Object.assign({}, seed);
|
||||||
|
g.save();
|
||||||
|
|
||||||
|
g.font = topTextFont;
|
||||||
|
g.fillStyle = "white";
|
||||||
|
g.strokeStyle = "white";
|
||||||
|
g.lineJoin = "round";
|
||||||
|
g.lineWidth = 10.0;
|
||||||
|
var metrics = g.measureText(topText);
|
||||||
|
g.translate(margin + (canvas.width - metrics.width - margin * 2) * 0.5, margin);
|
||||||
|
var x = 0;
|
||||||
|
for(var i = 0; i < topText.length; i++){
|
||||||
|
var c = topText.slice(i, i + 1);
|
||||||
|
var rot = random(xors) * 0.2;
|
||||||
|
var metrics = g.measureText(c);
|
||||||
|
g.save();
|
||||||
|
g.translate(metrics.width * 0.5, topTextSize * 0.5);
|
||||||
|
g.rotate(rot);
|
||||||
|
g.translate(-metrics.width * 0.5, -topTextSize * 0.5);
|
||||||
|
callback(i, c);
|
||||||
|
g.restore();
|
||||||
|
g.translate(metrics.width, 0);
|
||||||
|
}
|
||||||
|
g.restore();
|
||||||
|
}
|
||||||
|
g.save();
|
||||||
|
var xors = Object.assign({}, seed);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var topColors = ["#04ad8f", "#a6ce48", "#f3a118", "#ea6435", "#17b297", "#e30983", "#2782c4", "#1aa6e7", "#b5b5b5", "#f29905", "#e50011", "#ccdc26", "#a5328d", "#0aaa60", "#91c423", "#f29300", "#ec5f69", "#22b69e", "#e63e9b", "#917220"];
|
||||||
|
|
||||||
|
|
||||||
|
iterate(function(i, c){
|
||||||
|
g.shadowColor = "transparent";
|
||||||
|
|
||||||
|
g.strokeText(c, 0, 0);
|
||||||
|
});
|
||||||
|
iterate(function(i, c){
|
||||||
|
g.shadowColor = "rgba(0, 0, 0, 0.3)";
|
||||||
|
g.shadowBlur = 10;
|
||||||
|
g.fillStyle = topColors[i % topColors.length];
|
||||||
|
g.fillText(c, 0, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// centerize
|
||||||
|
var metrics = g.measureText(middleText);
|
||||||
|
g.translate((canvas.width - middleMetrics.width) * 0.5, margin + topTextSize + topMiddlePadding);
|
||||||
|
|
||||||
|
// stroke outline
|
||||||
|
g.font = middleTextFont;
|
||||||
|
g.strokeStyle = "white";
|
||||||
|
g.lineWidth = 20.0;
|
||||||
|
g.shadowColor = "rgba(0, 0, 0, 0.3)";
|
||||||
|
g.shadowBlur = 10;
|
||||||
|
g.lineCap = "round";
|
||||||
|
g.lineJoin = "round";
|
||||||
|
g.strokeText(middleText, 0, 0);
|
||||||
|
|
||||||
|
// fill charactors
|
||||||
|
var x = 0;
|
||||||
|
var xors = Object.assign({}, seed);
|
||||||
|
for(var i = 0; i < middleText.length; i++){
|
||||||
|
var c = middleText.slice(i, i + 1);
|
||||||
|
|
||||||
|
// base color
|
||||||
|
g.shadowColor = "rgba(0, 0, 0, 0.6)";
|
||||||
|
g.shadowBlur = 10;
|
||||||
|
g.fillStyle = colorTuples[i % colorTuples.length][0];
|
||||||
|
g.fillText(c, 0, 0);
|
||||||
|
|
||||||
|
g.save();
|
||||||
|
|
||||||
|
// clip
|
||||||
|
var rot = random(xors);
|
||||||
|
g.beginPath();
|
||||||
|
g.save();
|
||||||
|
g.translate(middleTextSize * 0.5, middleTextSize * 0.5);
|
||||||
|
g.rotate(rot);
|
||||||
|
g.translate(-middleTextSize * 0.5, -middleTextSize * 0.5);
|
||||||
|
g.moveTo(-middleTextSize * 2, middleTextSize * 0.5);
|
||||||
|
g.lineTo(middleTextSize * 2, middleTextSize * 0.5);
|
||||||
|
g.lineTo(middleTextSize * 2, middleTextSize * 2);
|
||||||
|
g.lineTo(-middleTextSize * 2, middleTextSize * 2);
|
||||||
|
g.closePath();
|
||||||
|
g.restore();
|
||||||
|
g.clip();
|
||||||
|
|
||||||
|
// upper color
|
||||||
|
g.shadowColor = "none";
|
||||||
|
g.shadowBlur = 0;
|
||||||
|
g.fillStyle = colorTuples[i % colorTuples.length][1];
|
||||||
|
g.fillText(c, 0, 0);
|
||||||
|
|
||||||
|
g.restore();
|
||||||
|
|
||||||
|
// go to next
|
||||||
|
var metrics = g.measureText(c);
|
||||||
|
g.translate(metrics.width, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
g.restore();
|
||||||
|
|
||||||
|
// bottom text
|
||||||
|
g.save();
|
||||||
|
g.strokeStyle = "white";
|
||||||
|
g.fillStyle = "#977a2d";
|
||||||
|
g.lineWidth = 13.0;
|
||||||
|
g.lineCap = "round";
|
||||||
|
g.lineJoin = "round";
|
||||||
|
g.textBaseline = "top";
|
||||||
|
g.font = bottomTextFont;
|
||||||
|
|
||||||
|
var metrics = g.measureText(bottomText);
|
||||||
|
g.translate(
|
||||||
|
(canvas.width - metrics.width - (bottomText.length - 1) * bottomTextLetterSpacing) * 0.5,
|
||||||
|
margin + topTextSize + topMiddlePadding + middleTextSize + middleBottomPadding
|
||||||
|
);
|
||||||
|
|
||||||
|
for(var i = 0; i < bottomText.length; i++){
|
||||||
|
var c = bottomText.slice(i, i + 1);
|
||||||
|
g.shadowColor = "rgba(0, 0, 0, 0.3)";
|
||||||
|
g.shadowBlur = 10;
|
||||||
|
g.strokeText(c, 0, 0);
|
||||||
|
g.shadowColor = "transparent";
|
||||||
|
g.fillText(c, 0, 0);
|
||||||
|
var metrics = g.measureText(c);
|
||||||
|
g.translate(metrics.width + bottomTextLetterSpacing, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
g.restore();
|
||||||
|
|
||||||
|
|
||||||
|
var url = canvas.toDataURL();
|
||||||
|
image.src = url;
|
||||||
|
download.href = url;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
topInput.value = "女の子の姿になった動物たちが繰り広げる大冒険！";
|
||||||
|
middleInput.value = "けものフレンズ";
|
||||||
|
bottomInput.value = "KEMONO FRIENDS";
|
||||||
|
update();
|
||||||
|
|
||||||
|
download.addEventListener("click", function(){
|
||||||
|
canvas.toBlob(function(blob) {
|
||||||
|
saveAs(blob, middleInput.value + ".png");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user