Skip to content

Instantly share code, notes, and snippets.

@noonworks

noonworks/FileSaver.min.js

Last active May 9, 2016 10:06
Show Gist options
  • Save noonworks/6cc0edd7dd8152baeaeb3f130e639f8c to your computer and use it in GitHub Desktop.
Save noonworks/6cc0edd7dd8152baeaeb3f130e639f8c to your computer and use it in GitHub Desktop.
Download ZIP
腐葉土っぽい表紙画像ジェネレータ
Raw
canvas-toBlob.js
/* canvas-toBlob.js
* A canvas.toBlob() implementation.
* 2013-12-27
*
* 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.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.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));
Raw
FileSaver.min.js
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs=saveAs||function(e){"use strict";if("undefined"==typeof navigator||!/MSIE [1-9]\./.test(navigator.userAgent)){var t=e.document,n=function(){return e.URL||e.webkitURL||e},o=t.createElementNS("http://www.w3.org/1999/xhtml","a"),r="download"in o,i=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},a=/Version\/[\d\.]+.*Safari/.test(navigator.userAgent),c=e.webkitRequestFileSystem,f=e.requestFileSystem||c||e.mozRequestFileSystem,u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},d="application/octet-stream",s=0,l=4e4,v=function(e){var t=function(){"string"==typeof e?n().revokeObjectURL(e):e.remove()};setTimeout(t,l)},p=function(e,t,n){t=[].concat(t);for(var o=t.length;o--;){var r=e["on"+t[o]];if("function"==typeof r)try{r.call(e,n||e)}catch(i){u(i)}}},w=function(e){return/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)?new Blob(["\ufeff",e],{type:e.type}):e},y=function(t,u,l){l||(t=w(t));var y,m,S,h=this,R=t.type,O=!1,g=function(){p(h,"writestart progress write writeend".split(" "))},b=function(){if(m&&a&&"undefined"!=typeof FileReader){var o=new FileReader;return o.onloadend=function(){var e=o.result;m.location.href="data:attachment/file"+e.slice(e.search(/[,;]/)),h.readyState=h.DONE,g()},o.readAsDataURL(t),void(h.readyState=h.INIT)}if((O||!y)&&(y=n().createObjectURL(t)),m)m.location.href=y;else{var r=e.open(y,"_blank");void 0===r&&a&&(e.location.href=y)}h.readyState=h.DONE,g(),v(y)},E=function(e){return function(){return h.readyState!==h.DONE?e.apply(this,arguments):void 0}},N={create:!0,exclusive:!1};return h.readyState=h.INIT,u||(u="download"),r?(y=n().createObjectURL(t),void setTimeout(function(){o.href=y,o.download=u,i(o),g(),v(y),h.readyState=h.DONE})):(e.chrome&&R&&R!==d&&(S=t.slice||t.webkitSlice,t=S.call(t,0,t.size,d),O=!0),c&&"download"!==u&&(u+=".download"),(R===d||c)&&(m=e),f?(s+=t.size,void f(e.TEMPORARY,s,E(function(e){e.root.getDirectory("saved",N,E(function(e){var n=function(){e.getFile(u,N,E(function(e){e.createWriter(E(function(n){n.onwriteend=function(t){m.location.href=e.toURL(),h.readyState=h.DONE,p(h,"writeend",t),v(e)},n.onerror=function(){var e=n.error;e.code!==e.ABORT_ERR&&b()},"writestart progress write abort".split(" ").forEach(function(e){n["on"+e]=h["on"+e]}),n.write(t),h.abort=function(){n.abort(),h.readyState=h.DONE},h.readyState=h.WRITING}),b)}),b)};e.getFile(u,{create:!1},E(function(e){e.remove(),n()}),E(function(e){e.code===e.NOT_FOUND_ERR?n():b()}))}),b)}),b)):void b())},m=y.prototype,S=function(e,t,n){return new y(e,t,n)};return"undefined"!=typeof navigator&&navigator.msSaveOrOpenBlob?function(e,t,n){return n||(e=w(e)),navigator.msSaveOrOpenBlob(e,t||"download")}:(m.abort=function(){var e=this;e.readyState=e.DONE,p(e,"abort")},m.readyState=m.INIT=0,m.WRITING=1,m.DONE=2,m.error=m.onwritestart=m.onprogress=m.onwrite=m.onabort=m.onerror=m.onwriteend=null,S)}}("undefined"!=typeof self&&self||"undefined"!=typeof window&&window||this.content);"undefined"!=typeof module&&module.exports?module.exports.saveAs=saveAs:"undefined"!=typeof define&&null!==define&&null!==define.amd&&define([],function(){return saveAs});
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>腐葉土</title>
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
<style>
.AlluraFont { font-family: 'Allura'; }
table, td, th {
border-collapse: collapse;
border:1px solid #333;
}
button {
margin: 0.5em;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>タイトル（上）</th>
<td><input class="f_inputs" type="text" id="title_top" name="title_top" value="ふようどっぽい" /></td>
</tr>
<tr>
<th>タイトル</th>
<td><input class="f_inputs" type="text" id="title_main" name="title_main" value="腐葉土本" /></td>
</tr>
<tr>
<th>タイトル（下）</th>
<td><input class="f_inputs" type="text" id="title_bottom" name="title_bottom" value="デザイン" /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th></th><th>攻め</th><th>受け</th></tr>
</thead>
<tbody>
<tr>
<th>カラー</th>
<td><input class="f_inputs" type="color" id="color_seme" name="color_seme" value="#A541F0" /></td>
<td><input class="f_inputs" type="color" id="color_uke" name="color_uke" value="#55AAFF" /></td>
</tr>
<tr>
<th>名前</th>
<td><input class="f_inputs" type="text" id="name_seme" name="name_seme" value="攻めくん" /></td>
<td><input class="f_inputs" type="text" id="name_uke" name="name_uke" value="受けちゃん" /></td>
</tr>
<tr>
<th>名前（背景）</th>
<td><input class="f_inputs" type="text" id="name_seme2" name="name_seme2" value="Semekun" /></td>
<td><input class="f_inputs" type="text" id="name_uke2" name="name_uke2" value="Ukechan" /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>タイトル下</th>
<td><input class="f_inputs" type="text" id="sub_text1" name="sub_text1" value="3種の" /></td>
<td><input class="f_inputs" type="text" id="sub_text2" name="sub_text2" value="ミックス" /></td>
</tr>
<tr>
<th>右の楕円</th>
<td><input class="f_inputs" type="text" id="circled_text1" name="circled_text1" value="ぷるるん" /></td>
<td><input class="f_inputs" type="text" id="circled_text2" name="circled_text2" value="新食感！" /></td>
</tr>
<tr>
<th rowspan="3">注意事項</th>
<td colspan="2"><input class="f_inputs" type="text" id="notice_title" name="notice_title" value="～お願い～" /></td>
</tr>
<tr>
<td><input class="f_inputs" type="text" id="notice_text1" name="notice_text1" value="小さなお子様や中高生の方は" /></td>
<td><input class="f_inputs" type="text" id="notice_text2" name="notice_text2" value="絶対に読まないでください。" /></td>
</tr>
<tr>
<td><input class="f_inputs" type="text" id="notice_text3" name="notice_text3" value="本製品は男性同士の性描写を含み、耐性のない方や" /></td>
<td><input class="f_inputs" type="text" id="notice_text4" name="notice_text4" value="18歳未満の方の購入はご遠慮いただいております。" /></td>
</tr>
</tbody>
</table>
<div><button id="save">画像を保存</button></div>
<canvas id="maincanvas" width="420" height="600"></canvas>
<div class="AlluraFont">.</div>
<script src="canvas-toBlob.js"></script>
<script src="FileSaver.min.js"></script>
<script>
(function(){
var green = 'rgb(15,80,10)';
var yellow = 'rgb(242,242,12)';
var red = 'rgb(200,40,40)';
var gold = 'rgb(175,155,95)';
var white = 'rgb(255,255,255)';
var black = 'rgb(0,0,0)';
function xScaleText(text, x, y, scale, fill, stroke) {
ctx.save();
ctx.scale(scale, 1);
if (stroke)
ctx.strokeText(text, x, y);
if (fill)
ctx.fillText(text, x, y);
ctx.restore();
}
function xScaleTextAlign(text, x1, x2, y, padding, max_scale, fill, stroke, align) {
if (typeof align != 'string') align = 'center';
align = align.toLowerCase();
var width = x2 - x1;
var w = ctx.measureText(text).width;
var scale = width / w;
if (max_scale > 0 && scale > max_scale) {
scale = max_scale;
switch (align) {
case 'left':
break;
case 'right':
padding += (width - w * scale) / scale;
break;
default:
padding += (width - w * scale) / 2 / scale;
}
}
xScaleText(text, x1 / scale + padding, y, scale, fill, stroke);
}
function pathEllipse(x1, y1, x2, y2) {
var xr = (x2 - x1) / 2; var yr = (y2 - y1) / 2;
var cx = (Math.sqrt(2.0) - 1.0) * xr * 4 / 3;
var cy = (Math.sqrt(2.0) - 1.0) * yr * 4 / 3;
ctx.beginPath();
ctx.moveTo(x1, y1 + yr);
ctx.bezierCurveTo(x1, y1 + yr - cy, x1 + xr - cx, y1, x1 + xr, y1);
ctx.bezierCurveTo(x1 + xr + cx, y1, x2, y1 + yr - cy, x2, y1 + yr);
ctx.bezierCurveTo(x2, y1 + yr + cy, x1 + xr + cx, y2, x1 + xr, y2);
ctx.bezierCurveTo(x1 + xr - cx, y2, x1, y1 + yr + cy, x1, y1 + yr);
}
var background_font_color = 'rgba(255,255,255,0.8)';
var background_font = "bold italic 56px 'Allura'";
var background_circle_font_color = white;
var background_circle_font = "30px 'Lucida Grande','segoe UI','Hiragino Maru Gothic ProN',Meiryo,Arial,sans-serif";
function background(ctx, color1, color2, name_s1, name_u1, name_s2, name_u2) {
// white rect
ctx.fillStyle = white;
ctx.fillRect(0, 10, 420, 580);
// left back
var grad1 = ctx.createLinearGradient(0, 0, 0, 380);
grad1.addColorStop(0, color1);
grad1.addColorStop(1, white);
ctx.fillStyle = grad1;
ctx.fillRect(0, 25, 210, 275);
// left name
ctx.fillStyle = background_font_color;
ctx.font = background_font;
xScaleTextAlign(name_s2, 10, 200, 70, -3, 1.5, true, false);
// right back
var grad2 = ctx.createLinearGradient(0, 0, 0, 380);
grad2.addColorStop(0, color2);
grad2.addColorStop(1, white);
ctx.fillStyle = grad2;
ctx.fillRect(210, 25, 210, 275);
// left name
ctx.fillStyle = background_font_color;
ctx.font = background_font;
xScaleTextAlign(name_u2, 220, 410, 70, -3, 1.5, true, false);
// left circle
pathEllipse(40, 67, 180, 137);
ctx.fillStyle = yellow;
ctx.fill();
pathEllipse(43, 70, 177, 134);
ctx.fillStyle = color1;
ctx.fill();
// name on left circle
ctx.fillStyle = background_circle_font_color;
ctx.font = background_circle_font;
xScaleTextAlign(name_s1, 50, 170, 113, 0, 1.5, true, false);
// right circle
pathEllipse(250, 67, 390, 137);
ctx.fillStyle = yellow;
ctx.fill();
pathEllipse(253, 70, 387, 134);
ctx.fillStyle = color2;
ctx.fill();
// name on left circle
ctx.fillStyle = background_circle_font_color;
ctx.font = background_circle_font;
xScaleTextAlign(name_u1, 260, 380, 113, 0, 1.5, true, false);
}
function fukuro(ctx) {
// top
ctx.beginPath();
ctx.moveTo(0, 10);
for (var i = 0; i < 42; i++) {
ctx.lineTo(10 * i + 5, 0);
ctx.lineTo(10 * (i + 1), 10);
}
ctx.lineTo(420, 15);
ctx.lineTo(0, 15);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
ctx.fillStyle = gold;
ctx.fillRect(0, 17, 420, 5);
ctx.fillStyle = green;
ctx.fillRect(0, 24, 420, 5);
// bottom
ctx.beginPath();
ctx.moveTo(0, 590);
for (var i = 0; i < 42; i++) {
ctx.lineTo(10 * i + 5, 600);
ctx.lineTo(10 * (i + 1), 590);
}
ctx.lineTo(420, 585);
ctx.lineTo(0, 585);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
ctx.fillStyle = gold;
ctx.fillRect(0, 578, 420, 5);
ctx.fillStyle = green;
ctx.fillRect(0, 571, 420, 5);
// center rect
var left_x = 20;
var right_x = 400;
var top_y = 140;
var bottom_y = 320;
var border_radius = 15;
var line_width = 5;
ctx.lineWidth = 5;
// center rect back
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.fillRect(left_x, top_y + border_radius, right_x - line_width - border_radius, bottom_y);
// top of center rect
ctx.beginPath();
ctx.moveTo(left_x, top_y + border_radius * 2);
ctx.lineTo(left_x, top_y + border_radius);
ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
ctx.lineTo(right_x - border_radius, top_y);
ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
ctx.lineTo(right_x, top_y + border_radius * 2);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
// bottom of center rect
ctx.beginPath();
ctx.moveTo(left_x, bottom_y - border_radius * 2);
ctx.lineTo(left_x, bottom_y - border_radius);
ctx.quadraticCurveTo(left_x, bottom_y, left_x + border_radius, bottom_y);
ctx.lineTo(right_x - border_radius, bottom_y);
ctx.quadraticCurveTo(right_x, bottom_y, right_x, bottom_y - border_radius);
ctx.lineTo(right_x, bottom_y - border_radius * 2);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
// side of center rect
ctx.fillStyle = green;
ctx.fillRect(left_x, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
ctx.fillRect(right_x - 5, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
// bottom rect
left_x = 20;
right_x = 400;
top_y = 390;
bottom_y = 540;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(left_x, top_y + border_radius);
ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
ctx.lineTo(right_x - border_radius, top_y);
ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
ctx.lineTo(right_x, bottom_y - border_radius);
ctx.quadraticCurveTo(right_x, bottom_y, right_x - border_radius, bottom_y);
ctx.lineTo(left_x + border_radius, bottom_y);
ctx.quadraticCurveTo(left_x, bottom_y, left_x, bottom_y - border_radius);
ctx.closePath();
ctx.strokeStyle = black;
ctx.stroke();
// right circle
pathEllipse(240, 310, 400, 390);
ctx.fillStyle = yellow;
ctx.fill();
}
var title_font = "bold 93px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var title_sub_font = "20px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
function titles(ctx, top, main, bottom) {
top = top.split('').join(' ');
bottom = bottom.split('').join(' ');
// main
ctx.font = title_font;
ctx.strokeStyle = green;
ctx.fillStyle = green;
xScaleTextAlign(main, 29, 391, 270, 0, 1.5, true, true);
// top & bottom
ctx.font = title_sub_font;
ctx.fillStyle = white;
xScaleTextAlign(top, 40, 380, 163, 0, 1, true, false);
xScaleTextAlign(bottom, 40, 380, 313, 0, 1, true, false);
}
var circled_font = "'Hiragino Mincho Pro','MS Mincho','TakaoMincho'";
function circledText(ctx, text1, text2) {
ctx.save();
ctx.rotate(Math.PI / -16);
ctx.lineWidth = 1;
ctx.strokeStyle = red;
ctx.fillStyle = red;
// text1
ctx.font = 'bold 28px ' + circled_font;
xScaleTextAlign(text1, 180, 295, 403, 0, 1.5, true, true);
// text2
ctx.font = 'bold 26px ' + circled_font;
xScaleTextAlign(text2, 210, 315, 431, 0, 1.5, true, false);
ctx.restore();
}
var big1_font = "bold italic 80px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var sub_font = "bold italic 30px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
function sub(ctx, text1, text2) {
var big1 = text1.substring(0, 1);
var text1 = text1.substring(1, text1.length);
// compute scale
ctx.font = big1_font;
var big1_w = ctx.measureText(big1).width;
ctx.font = sub_font;
var text1_w = ctx.measureText(text1).width;
var text2_w = ctx.measureText(text2).width;
var width = big1_w + text1_w + text2_w;
var scale = 230 / width;
// big1
ctx.font = big1_font;
ctx.lineWidth = 5;
ctx.strokeStyle = yellow;
ctx.fillStyle = red;
xScaleText(big1, 10, 380, scale, true, true);
// text1
ctx.font = sub_font;
xScaleText(text1, 10 + big1_w, 375, scale, true, true);
// text2
ctx.fillStyle = green;
xScaleText(text2, 12 + big1_w + text1_w, 375, scale, true, true);
}
var notice_title_font = "bold 26px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var notice_text12_font = "bold 22px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var notice_text34_font = "16px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
function notice(ctx, title, text1, text2, text3, text4) {
// title
ctx.fillStyle = red;
ctx.font = notice_title_font;
xScaleTextAlign(title, 30, 390, 420, 0, 1, true, false);
// text1, text2
ctx.font = notice_text12_font;
ctx.fillStyle = black;
xScaleTextAlign(text1, 30, 390, 450, 0, 1, true, false, 'left');
xScaleTextAlign(text2, 30, 390, 475, 0, 1, true, false, 'right');
// text3, text4
ctx.font = notice_text34_font;
xScaleTextAlign(text3, 30, 390, 500, 0, 1, true, false, 'left');
xScaleTextAlign(text4, 30, 390, 520, 0, 1, true, false, 'left');
}
function redraw() {
ctx.clearRect(0, 0, 420, 640);
// background
var semecolor = document.querySelector('#color_seme').value;
var ukecolor = document.querySelector('#color_uke').value;
var name_s1 = document.querySelector('#name_seme').value;
var name_u1 = document.querySelector('#name_uke').value;
var name_s2 = document.querySelector('#name_seme2').value;
var name_u2 = document.querySelector('#name_uke2').value;
background(ctx, semecolor, ukecolor, name_s1, name_u1, name_s2, name_u2);
// base
fukuro(ctx);
// text
var title_top = document.querySelector('#title_top').value;
var title_main = document.querySelector('#title_main').value;
var title_bottom = document.querySelector('#title_bottom').value;
titles(ctx, title_top, title_main, title_bottom);
// circled
var circled_text1 = document.querySelector('#circled_text1').value;
var circled_text2 = document.querySelector('#circled_text2').value;
circledText(ctx, circled_text1, circled_text2);
// sub
var sub_text1 = document.querySelector('#sub_text1').value;
var sub_text2 = document.querySelector('#sub_text2').value;
sub(ctx, sub_text1, sub_text2);
// notice
var notice_title = document.querySelector('#notice_title').value;
var notice_text1 = document.querySelector('#notice_text1').value;
var notice_text2 = document.querySelector('#notice_text2').value;
var notice_text3 = document.querySelector('#notice_text3').value;
var notice_text4 = document.querySelector('#notice_text4').value;
notice(ctx, notice_title, notice_text1, notice_text2, notice_text3, notice_text4);
}
function save() {
canvas.toBlob(function(blob) {
saveAs(blob, 'fuyodo_' + (new Date()).getTime() + '.png');
});
}
var ua = navigator.userAgent.toLowerCase();
var isIE = (ua.indexOf('msie') > -1) || (ua.indexOf('trident/7') > -1);
var canvas, ctx;
function initialize() {
// set events
var inputs = document.querySelectorAll('.f_inputs');
for (var i = 0; i < inputs.length; i++) {
inputs[i].previous_value = inputs[i].value;
if (!isIE && inputs[i].type == 'color') {
inputs[i].addEventListener('change', function(e){
if (this.previous_value == this.value) return;
redraw();
this.previous_value = this.value;
});
} else {
inputs[i].addEventListener('keydown', function(e){
this.previous_value = this.value;
});
inputs[i].addEventListener('keyup', function(e){
if (this.previous_value == this.value) return;
redraw();
});
}
}
document.getElementById('save').addEventListener('click', save);
canvas = document.getElementById('maincanvas');
ctx = canvas.getContext('2d');
// Trick from http://stackoverflow.com/questions/2635814/
var image = new Image;
image.src = 'https://fonts.googleapis.com/css?family=Allura';
image.onerror = redraw;
}
document.addEventListener('DOMContentLoaded', initialize);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment