Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript Image Upload, Canvas, and Local Storage Example
<!-- http://tech.pro/tutorial/1383/javascript-one-language-to-rule-them-all -->
<style>
[for=blue] { color: blue; }
[for=green] { color: green; }
[for=red] { color: red; }
</style>
<input id="uploadImage" type="file" name="photo" />
<input id="caption" type="text" name="caption" placeholder="caption" />
<label for="blue">Blue</label>
<input id="color" type="radio" name="color" value="blue" />
<label for="green">Green</label>
<input id="color" type="radio" name="color" value="green" />
<label for="red">Red</label>
<input id="color" type="radio" name="color" value="red" />
<canvas id="canvas" width="640" height="480" style="border:1px solid #ccc"></canvas>
<br />
<h5>Preview</h5>
<a href="#" id="imageData" type="text" target="_blank">
<img id="preview" style="width:200px; height: 200px;" />
</a>
// http://tech.pro/tutorial/1383/javascript-one-language-to-rule-them-all
var ls = window.localStorage,
photo = document.getElementById('uploadImage'),
canvas = document.getElementById('canvas'),
caption = document.getElementById('caption'),
colors = document.getElementsByName('color'),
context = canvas.getContext('2d'),
fileReader = new FileReader(),
img = new Image(), lastImgData = ls.getItem('image'),
x, y,
currentText = ls.getItem('text') || "",
color = ls.getItem('color') || "black", neww = 0, newh = 0;
if (color) {
Array.prototype.forEach.call(colors, function(el) {
if (el.value === color) {
el.checked = true;
}
});
}
if (currentText) {
caption.value = currentText;
}
if (lastImgData) {
img.src = lastImgData;
}
fileReader.onload = function (e) {
console.log(typeof e.target.result, e.target.result instanceof Blob);
img.src = e.target.result;
};
img.onload = function() {
var rw = img.width / canvas.width; // width and height are maximum thumbnail's bounds
var rh = img.height / canvas.height;
if (rw > rh)
{
newh = Math.round(img.height / rw);
neww = canvas.width;
}
else
{
neww = Math.round(img.width / rh);
newh = canvas.height;
}
x = (canvas.width - neww) / 2,
y = (canvas.height - newh) / 2;
drawImage();
};
photo.addEventListener('change', function() {
var file = this.files[0];
return file && fileReader.readAsDataURL(file);
});
caption.addEventListener('change', function(event) {
currentText = event.target.value;
drawImage();
});
canvas.addEventListener('dragover', function(event) {
event.preventDefault();
});
canvas.addEventListener('drop', function(event) {
event.preventDefault();
fileReader.readAsDataURL(event.dataTransfer.files[0]);
});
Array.prototype.forEach.call(colors, function(el) {
el.addEventListener('change', function(e) {
color = e.target.value;
drawImage(currentText);
});
});
function drawImage() {
var dataUrl;
canvas.width = canvas.width;
if (img.width) context.drawImage(img, x, y, neww, newh);
context.font = 'bold 18pt arial';
context.fillStyle = color;
context.fillText(currentText, 150, 100);
dataUrl = canvas.toDataURL();
document.getElementById('imageData').href = dataUrl;
document.getElementById('preview').src = dataUrl;
ls.setItem('text', currentText);
ls.setItem('color', color);
ls.setItem('image', img.src);
}
drawImage();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment