Kemonogen komplett überarbeitet
This commit is contained in:
parent
a0b945e708
commit
7dcfa38e8d
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,2 @@
|
||||
/checkwave
|
||||
/kemonogen
|
||||
/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