-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (138 loc) · 5.03 KB
/
index.html
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>rgba4ie</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
#canvas-wrapper {
background: url("img/cat.jpeg") no-repeat;
width: 300px;
height: 158px;
position: relative;
}
#canvas {
top: 69px;
left: 130px;
position: absolute;
}
</style>
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>rgba4ie</h1>
</div>
<div class="row">
<div class="span8">
<form class="form-horizontal">
<fieldset>
<legend>Settings</legend>
<div class="control-group">
<label class="control-label" for="red">RGB</label>
<div class="controls">
<input id="red" class="input-mini stepper" type="number" max="255" min="0" value="0" />
<input id="green" class="input-mini stepper" type="number" max="255" min="0" value="0" />
<input id="blue" class="input-mini stepper" type="number" max="255" min="0" value="0" />
<p class="help-block">Choose between 0 and 255.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="opacity">Opacity</label>
<div class="controls">
<input id="opacity" class="input-mini stepper" type="number" max="1" step=".1" min="0" value="1" />
<p class="help-block">Choose between 0 and 1.</p>
</div>
</div>
<div class="form-actions">
<a id="generate" class="btn btn-primary">Generate image</a>
</div>
</fieldset>
</form>
</div>
<div id="canvas-view" class="span4">
<h2>Preview</h2>
<p id="canvas-wrapper">
<canvas id="canvas" width="40" height="40"></canvas>
</p>
<a id="download" class="btn btn-primary">Download</a>
</div>
<div class="span8">
<div class="well">
<h2>Whats this?</h2>
<p>Problem: < IE8 doesn't support CSS3 rgba(), so I need to create a png fallback each time I use rgba(). Quite tiresome to open Photoshop each time for such a small operation, so I created a simple HTML tool. </p>
<p class="alert notice">Note: Only canvas enabled browsers are supported. </p>
<h3>Todo</h3>
<ul>
<li>Set width and height of the image</li>
<li>Image behind preview should get brighter/darker based on the content of the canvas</li>
<li>Save <em>n</em> last used settings</li>
<li>"Download" should open a "Save as" dialog (use <a href="http://nihilogic.dk/labs/canvas2image/">Canvas2img</a>?)</li>
</ul>
</div>
</div>
</div>
</div> <!-- /container -->
<script type="text/javascript">
window.onload = init;
function init() {
// cache variables
var i, red, green, blue, opacity,
_red = document.getElementById("red"),
_green = document.getElementById("green"),
_blue = document.getElementById("blue"),
_opacity = document.getElementById("opacity"),
steppers = document.getElementsByClassName("stepper");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var generate = document.getElementById("generate");
var download = document.getElementById("download");
// listen for changes to color input
for(i = 0; i < steppers.length; i++){
steppers[i].addEventListener("change", function(e) {
setColors();
generatePng(canvas, context, red, green, blue, opacity);
});
}
// listen for click on "generate image"
generate.addEventListener("click", function() {
setColors();
generatePng(canvas, context, red, green, blue, opacity);
});
// listen for click on "download"
download.addEventListener("click", function() {
downloadPng(canvas);
});
// private functions
function setColors() {
red = _red.value;
green = _green.value;
blue = _blue.value;
opacity = _opacity.value;
};
generatePng = function(canvas, context, red, green, blue, opacity) {
// clear old canvas
context.clearRect(0, 0, canvas.width, canvas.width);
// fill with colors
context.fillStyle = "rgba(" + red + " , " + green + ", " + blue + ", " + opacity + ")";
// draw rectangle
context.fillRect(0, 0, canvas.width, canvas.width);
return false;
};
downloadPng = function(canvas) {
// open new window with png image
window.open(canvas.toDataURL("image/png"));
};
};
</script>
</body>
</html>