/
imageconverter.html
114 lines (101 loc) · 5.32 KB
/
imageconverter.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
<html>
<head>
</head>
<body>
<script src="../heatshrink.js"></script>
<script src="../imageconverter.js"></script>
<p>An online image converter for Espruino...</p>
<input type="file" id="fileLoader"/><br/>
<input type="checkbox" id="compression" onchange="imageLoaded()"> Use Compression?</input><br/>
<input type="checkbox" id="alphaToColor" onchange="imageLoaded()"> Transparency to Color</input><br/>
<input type="checkbox" id="transparent" onchange="imageLoaded()" checked> Transparency?</input><br/>
<input type="checkbox" id="inverted" onchange="imageLoaded()"> Inverted?</input><br/>
<input type="checkbox" id="autoCrop" onchange="imageLoaded()"> Crop?</input><br/>
Diffusion: <select id="diffusion" onchange="imageLoaded()"></select><br/>
Brightness: <span id="brightnessv"></span>
<input type="range" id="brightness" min="-127" max="127" value="0" onchange="imageLoaded()"></input><br/>
Contrast: <span id="contrastv"></span>
<input type="range" id="contrast" min="-255" max="255" value="0" onchange="imageLoaded()"></input><br/>
Colours: <select id="colorStyle" onchange="imageLoaded()"></select><br/>
Output As: <select id="outputStyle" onchange="imageLoaded()">
</select><br/>
<canvas id="canvas" style="display:none;"></canvas>
<h2>Result</h2>
<p><span id="ressize">...</span></p>
<textarea id="resdata" style="display:none;"></textarea>
<script>
// load available colour formats and diffusion...
imageconverter.setFormatOptions(document.getElementById("colorStyle"));
imageconverter.setDiffusionOptions(document.getElementById("diffusion"));
imageconverter.setOutputOptions(document.getElementById("outputStyle"));
var img;
function imageLoaded() {
if (img === undefined) return;
var options = {};
var diffusionSelect = document.getElementById("diffusion");
options.diffusion = diffusionSelect.options[diffusionSelect.selectedIndex].value;
options.compression = document.getElementById("compression").checked;
options.alphaToColor = document.getElementById("alphaToColor").checked;
options.transparent = document.getElementById("transparent").checked;
options.inverted = document.getElementById("inverted").checked;
options.autoCrop = document.getElementById("autoCrop").checked;
options.brightness = 0|document.getElementById("brightness").value;
document.getElementById("brightnessv").innerText = options.brightness;
options.contrast = 0|document.getElementById("contrast").value;
document.getElementById("contrastv").innerText = options.contrast;
var colorSelect = document.getElementById("colorStyle");
options.mode = colorSelect.options[colorSelect.selectedIndex].value;
var outputSelect = document.getElementById("outputStyle");
options.output = outputSelect.options[outputSelect.selectedIndex].value;
var canvas = document.getElementById("canvas")
canvas.width = img.width*2;
canvas.height = img.height;
canvas.style = "display:block;border:1px solid black;margin:8px;"
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
var imgstr = "";
if (true) {
var imageData = ctx.getImageData(0, 0, img.width, img.height);
ctx.fillStyle = 'white';
ctx.fillRect(options.width, 0, img.width, img.height);
var rgba = imageData.data;
options.rgbaOut = rgba;
options.width = img.width;
options.height = img.height;
imgstr = imageconverter.RGBAtoString(rgba, options);
var outputImageData = new ImageData(options.rgbaOut, options.width, options.height);
ctx.putImageData(outputImageData,img.width,0);
}/* else { // output the image as slices
var SLICEHEIGHT = 8;
for (var y=0;y<img.height;y+=SLICEHEIGHT) {
var imageData = ctx.getImageData(0, y, img.width, SLICEHEIGHT);
var rgba = imageData.data;
options.rgbaOut = rgba;
options.width = img.width;
options.height = SLICEHEIGHT;
imgstr += "require('Storage').write('im"+(y/SLICEHEIGHT)+"',"+imageconverter.RGBAtoString(rgba, options)+")\n";
ctx.putImageData(imageData,img.width,y);
}
}*/
// checkerboard for transparency on original image
var imageData = ctx.getImageData(0, 0, img.width, img.height);
imageconverter.RGBAtoCheckerboard(imageData.data, {width:img.width,height:img.height});
ctx.putImageData(imageData,0,0);
document.getElementById("ressize").innerHTML = imgstr.length+" Characters";
document.getElementById("resdata").innerHTML = imgstr;
document.getElementById("resdata").style = "width:650px;height:300px;";
}
function handleFileSelect(event) {
if (event.target.files.length != 1) return;
var reader = new FileReader();
reader.onload = function(event) {
img = new Image();
img.onload = imageLoaded;
img.src = event.target.result;
};
reader.readAsDataURL(event.target.files[0]);
};
document.getElementById('fileLoader').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>