-
Notifications
You must be signed in to change notification settings - Fork 0
/
canvas.js
93 lines (80 loc) · 2.77 KB
/
canvas.js
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
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
var FONT = "15pt Arial";
var SCALE = 800;
var OFFSET = 30;
CanvasRenderingContext2D.prototype.setDimensions = function (width, height) {
this.canvas.width = width;
this.canvas.height = height;
};
CanvasRenderingContext2D.prototype.caption = function (img, caption, logo) {
var width = SCALE;
var height = SCALE * img.height / img.width;
this.setDimensions(width, height);
this.drawImage(img, 0, 0, width, height);
this.shadowColor = "black";
this.shadowBlur = 8;
this.shadowOffsetX = 0;
this.shadowOffsetY = 0;
this.drawImage(logo,
width - logo.width - OFFSET,
height - logo.height - OFFSET);
this.font = FONT;
this.fillStyle = "white";
this.shadowColor = "black";
this.shadowBlur = 8;
this.shadowOffsetX = 5;
this.shadowOffsetY = 5;
this.fillText(caption, OFFSET, height - OFFSET);
};
CanvasRenderingContext2D.prototype.clear = function () {
this.clearRect(0, 0, this.canvas.width, this.canvas.height);
};
window.onload = function () {
var canvas = document.getElementById("my");
var ctx = canvas.getContext("2d");
var img = document.createElement("img");
var logo = document.getElementById("logo");
var caption = document.getElementById("caption");
var sample = document.getElementById("sample");
var sampleButton = document.getElementById("sample-button");
sampleButton.onclick = function () {
ctx.caption(sample, "So ya like captions...", logo);
}
caption.onkeyup = function () {
// kind of hacky since it redraws the image every key up
ctx.caption(img, caption.value, logo);
};
/* From robertnyman.com/2011/03/10/using-html5-canvas-drag-and-drop-and-file-api-to-offer-the-cure/. */
img.addEventListener("load", function () {
if (img.width < SCALE) {
alert("NO! UPLOAD BIGGAR IMAGE! YOU FOOOOOOOL");
}
else {
ctx.clear();
ctx.caption(img, caption.value, logo);
}
}, false);
/* From robertnyman.com/2011/03/10/using-html5-canvas-drag-and-drop-and-file-api-to-offer-the-cure/. */
canvas.addEventListener("dragover", function (e) {
e.preventDefault();
}, false);
/* From robertnyman.com/2011/03/10/using-html5-canvas-drag-and-drop-and-file-api-to-offer-the-cure/. */
canvas.addEventListener("drop", function (e) {
var files = e.dataTransfer.files;
if (files.length > 0) {
var file = files[0];
if (typeof FileReader !== "undefined" &&
file.type.indexOf("image") != -1) {
var reader = new FileReader();
// Note: addEventListener doesn't work in Google Chrome for this event
reader.addEventListener("onload", function (e) {
img.src = e.target.result;
});
reader.onload = function (e) {
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
e.preventDefault();
}, false);
};