- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 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
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
var up = document.getElementById('upload'),
text1 = document.getElementById('text1'),
text2 = document.getElementById('text2'),
sliderSize = document.getElementById('sliderSize'),
sliderImage = document.getElementById('sliderImage'),
file = document.getElementById('image'),
canvas = document.getElementById('canvas'),
uploaded = document.getElementById('uploaded'),
placeholder_image = document.getElementById('placeholder_image');
up.addEventListener('click', uploadToImgur);
text1.addEventListener('keyup', updateImage);
text2.addEventListener('keyup', updateImage);
sliderSize.addEventListener('change', updateImage);
sliderImage.addEventListener('change', updateImage);
file.addEventListener('change', changeAndUpdateImage);
function readFile(fileInput, callback) {
var f = fileInput.files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
callback(e.target.result);
};
})(f);
reader.readAsDataURL(f);
}
var curImg = null;
placeholder_image.onload = function() {
curImg = placeholder_image;
updateImage();
}
function changeAndUpdateImage() {
var img = new Image();
readFile(file, function(dataURL) {
img.onload = function() {
curImg = img;
sliderImage.value = Math.max(img.width, img.height);
canvas.width = img.width;
canvas.height = img.height;
//canvas.style.height = img.height + 'px';
//canvas.style.width = img.width + 'px';
updateImage();
}
img.src = dataURL;
});
}
function drawLines(ctx, lines, x, y, yStep) {
lines = lines.split('\n');
if (yStep < 0) lines = lines.reverse();
lines.forEach(function(l, k) {
ctx.strokeText(l, x, y + yStep * k);
ctx.fillText(l, x, y + yStep * k);
});
}
function updateImage() {
var LINE_HEIGHT = 1.1;
var PARAGRAPH_HEIGHT = 1.5;
var imgSizeLimit = parseFloat(sliderImage.value);
var canvasSize = autoScale({
w: curImg.width,
h: curImg.height
}, imgSizeLimit);
canvas.width = canvasSize.w;
canvas.height = canvasSize.h;
var ctx = canvas.getContext("2d");
var txtSize = parseFloat(sliderSize.value) || 24;
if (!curImg) return;
ctx.strokeStyle = '#000000';
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(curImg, 0, 0, canvas.width, canvas.height);
ctx.font = txtSize + "px Impact";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.lineWidth = Math.round(Math.max(1, txtSize / 12));
drawLines(ctx, text1.value, canvas.width / 2,
txtSize * PARAGRAPH_HEIGHT / 2, LINE_HEIGHT * txtSize);
drawLines(ctx, text2.value, canvas.width / 2,
canvas.height - txtSize * PARAGRAPH_HEIGHT / 2, -1 * LINE_HEIGHT * txtSize );
Follow us!