[enh] Adds picture upload + code cleanup (a bit)
This commit is contained in:
alban
parent
d0288d3cc9
commit
60b9129e7c
2 changed files with 203 additions and 155 deletions
|
|
@ -1,10 +1,7 @@
|
|||
|
||||
$(document).ready(function(){
|
||||
|
||||
var binary_level = 100
|
||||
var url = document.location.origin
|
||||
var cropper = null
|
||||
var snap = null
|
||||
|
||||
|
||||
Cropper.setDefaults({
|
||||
viewMode: 1,
|
||||
|
|
@ -12,66 +9,81 @@ $(document).ready(function(){
|
|||
})
|
||||
|
||||
// Grab elements, create settings, etc.
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var video = document.getElementById('video');
|
||||
var mediaConfig = { video: true };
|
||||
var snapCanvas = document.getElementById('canvas');
|
||||
var snapContext = snapCanvas.getContext('2d');
|
||||
var simuCanvas = document.getElementById("simuCanvas");
|
||||
var simuContext = simuCanvas.getContext("2d");
|
||||
|
||||
var simuLastPoint = { x: 0, y: 0, color: 0};
|
||||
var simuZoom = 1;
|
||||
var binary_level = 100
|
||||
var url = document.location.origin
|
||||
var cropper = null
|
||||
var snap = null
|
||||
|
||||
|
||||
/*
|
||||
Helpers
|
||||
*/
|
||||
|
||||
var errBack = function(e) {
|
||||
console.log('An error has occurred!', e)
|
||||
};
|
||||
|
||||
var Point = function( l ){
|
||||
return {
|
||||
"x" : l[0],
|
||||
"y" : l[1],
|
||||
"color" : l[2]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Take a new snapshot from the camera and store it
|
||||
**/
|
||||
function doSnap(){
|
||||
function videoToSnap(){
|
||||
showSnap(video, video.width, video.height)
|
||||
}
|
||||
|
||||
function showSnap(src, width, height){
|
||||
cropper && cropper.destroy()
|
||||
let width = video.width
|
||||
let height = video.height
|
||||
context.drawImage(video, 0, 0, width, height);
|
||||
snap = context.createImageData(width, height);
|
||||
snap.data.set( context.getImageData(0, 0, width, height).data )
|
||||
binary(context)
|
||||
$("#result").show()
|
||||
snapContext.drawImage(src, 0, 0, width, height);
|
||||
snap = snapContext.createImageData(width, height);
|
||||
snap.data.set( snapContext.getImageData(0, 0, width, height).data )
|
||||
binary(snapContext)
|
||||
$(".result").show()
|
||||
cropper = new Cropper(snapCanvas);
|
||||
// Animation removed: it was causing problems with the send button. Fix.
|
||||
//$('html, body').animate({scrollTop: $("#result").offset().top}, 2000);
|
||||
cropper = new Cropper(canvas);
|
||||
}
|
||||
|
||||
function doContrast(){
|
||||
let cropperData = {}
|
||||
if( cropper ){
|
||||
cropperData = cropper.getData()
|
||||
cropper.destroy()
|
||||
cropperData = cropper.getData()
|
||||
cropper.destroy()
|
||||
}
|
||||
context.putImageData(snap,0,0)
|
||||
binary(context)
|
||||
cropper = new Cropper(canvas);
|
||||
snapContext.putImageData(snap,0,0)
|
||||
binary(snapContext)
|
||||
cropper = new Cropper(snapCanvas);
|
||||
setTimeout( () => { cropper.setData(cropperData) ; },30)
|
||||
}
|
||||
|
||||
// Trigger photo take
|
||||
$('.snap').on('click', function() {
|
||||
doSnap()
|
||||
});
|
||||
|
||||
/*
|
||||
To convert image into binary , we will threshold it.
|
||||
Based upon the threshold value
|
||||
thresh_red, thresh_blue, thresh_green ==> are the respective red, blue and green color threshold values. Any thing above this threshold value will be denoted by white color and anything below will be black
|
||||
*/
|
||||
function binary(context){
|
||||
|
||||
/*
|
||||
To convert image into binary , we will threshold it.
|
||||
Based upon the threshold value
|
||||
thresh_red, thresh_blue, thresh_green ==> are the respective red, blue and green color threshold values. Any thing above this threshold value will be denoted by white color and anything below will be black
|
||||
*/
|
||||
|
||||
var image = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
|
||||
var thresh_red = binary_level;
|
||||
var thresh_green = binary_level;
|
||||
var thresh_blue = binary_level;
|
||||
|
||||
var channels = image.data.length/4;
|
||||
for(var i=0;i<channels;i++){
|
||||
var r = image.data[i*4 + 0];
|
||||
var g = image.data[i*4 + 1];
|
||||
var b = image.data[i*4 + 2];
|
||||
if( r>= thresh_red && g>= thresh_green && b>=thresh_blue ){
|
||||
if( r>= binary_level ){
|
||||
image.data[i*4 + 0] = 255;
|
||||
image.data[i*4 + 1] = 255;
|
||||
image.data[i*4 + 2] = 255;
|
||||
|
|
@ -84,112 +96,74 @@ $(document).ready(function(){
|
|||
context.putImageData(image, 0, 0);
|
||||
|
||||
}
|
||||
$("#result").hide()
|
||||
|
||||
var slider = $( "#slider" ).slider({
|
||||
range: false,
|
||||
value: 100,
|
||||
animate: 300,
|
||||
min : 0,
|
||||
max : 255,
|
||||
change: function(event,ui){
|
||||
binary_level = ui.value
|
||||
console.log(`binary_level:${binary_level}`)
|
||||
doContrast()
|
||||
|
||||
function processFiles(files) {
|
||||
if(files && typeof FileReader !== "undefined") {
|
||||
for(var i=0; i<files.length; i++) {
|
||||
fileToSnap(files[i]);
|
||||
}
|
||||
});
|
||||
$("#send").on("click",function(){
|
||||
var cropCanvas = cropper.getCroppedCanvas();
|
||||
image_data = cropCanvas.toDataURL();
|
||||
$("#messages").html('<div class="alert alert-primary" role="alert">Sending...</div>')
|
||||
|
||||
$.ajax({
|
||||
timeout: 3000,
|
||||
url: url + "/image",
|
||||
method:"POST",
|
||||
dataType: "json",
|
||||
data:{
|
||||
image_data : image_data,
|
||||
text : $("#text").val()
|
||||
},
|
||||
|
||||
}).done(function(d,m,j){
|
||||
if( d.errors ){
|
||||
msg = d.errors.join(" / ")
|
||||
$("#messages").html(`<div class="alert alert-danger" role="alert">Something went wrong: ${msg}</div>`)
|
||||
return
|
||||
}
|
||||
$("#messages").html(`<div class="alert alert-success" role="alert">OK, your image will be available in a few seconds as <a href="#${d.hash_name}" class="hash_name btn btn-sm btn-secondary">${d.hash_name}</a></div>`)
|
||||
imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : []
|
||||
imageList.push(d.hash_name)
|
||||
localStorage.setItem("imageList",JSON.stringify(imageList))
|
||||
refreshImageList()
|
||||
})
|
||||
.fail(function(d,m,jq){
|
||||
$("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
var simuCanvas = document.getElementById("simuCanvas");
|
||||
var ctx = simuCanvas.getContext("2d");
|
||||
var lastpoint = { x: 0, y: 0, color: 0};
|
||||
var zoom = 1;
|
||||
//ctx.save
|
||||
|
||||
Point = function( l ){
|
||||
return {
|
||||
"x" : l[0],
|
||||
"y" : l[1],
|
||||
"color" : l[2]
|
||||
}
|
||||
}
|
||||
|
||||
var fileToSnap = function(file) {
|
||||
if( (/image/i).test(file.type) ) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
let base_image = new Image();
|
||||
base_image.src = e.target.result;
|
||||
base_image.width = 640;
|
||||
base_image.onload = function(){
|
||||
showSnap(base_image,640,480)
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
// Draws every segment received, except black colored target ones
|
||||
var drawSimu = function() {
|
||||
pointsList = document.pointsList
|
||||
if (pointsList.length > 0)
|
||||
{
|
||||
ctx.clearRect(0,0,simuCanvas.width,simuCanvas.height);
|
||||
lastpoint = new Point(pointsList[0])
|
||||
simuContext.clearRect(0,0,simuCanvas.width,simuCanvas.height);
|
||||
simuLastPoint = new Point(pointsList[0])
|
||||
for (var i = 0; i < pointsList.length; i+=1)
|
||||
{
|
||||
point = new Point(pointsList[i])
|
||||
// if the target is black, skip drawing
|
||||
if( point.color != 0){
|
||||
ctx.beginPath()
|
||||
ctx.shadowBlur = 5;
|
||||
ctx.shadowColor = 'rgba(255, 255, 255, 1)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
|
||||
ctx.moveTo(lastpoint.x * zoom, lastpoint.y * zoom);
|
||||
ctx.lineTo(point.x * zoom, point.y * zoom);
|
||||
ctx.stroke();
|
||||
ctx.closePath()
|
||||
simuContext.beginPath()
|
||||
simuContext.shadowBlur = 5;
|
||||
simuContext.shadowColor = 'rgba(255, 255, 255, 1)';
|
||||
simuContext.lineWidth = 2;
|
||||
simuContext.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
|
||||
simuContext.moveTo(simuLastPoint.x * simuZoom, simuLastPoint.y * simuZoom);
|
||||
simuContext.lineTo(point.x * simuZoom, point.y * simuZoom);
|
||||
simuContext.stroke();
|
||||
simuContext.closePath()
|
||||
}
|
||||
lastpoint = point
|
||||
simuLastPoint = point
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function refreshImageList(){
|
||||
var imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : []
|
||||
|
||||
if( 0 == imageList.length){
|
||||
$("#preview").hide()
|
||||
return
|
||||
}
|
||||
$("#preview").show()
|
||||
|
||||
html = ''
|
||||
for( id in imageList.reverse()){
|
||||
hash_name = imageList[id]
|
||||
html += `<li class="list-group-item"><a href="#${hash_name}" class="hash_name btn-sm btn btn-secondary" rel="${hash_name}">${hash_name}</a></li>`
|
||||
}
|
||||
$("#imageList").html(`<ul class="list-group">${html}</ul>`)
|
||||
|
||||
}
|
||||
refreshImageList()
|
||||
|
||||
|
||||
|
||||
var showImage = function(e){
|
||||
var el = $(e.target)
|
||||
|
|
@ -216,19 +190,84 @@ $(document).ready(function(){
|
|||
})
|
||||
}
|
||||
|
||||
$("#imageList").on("click", showImage)
|
||||
$("#messages").on("click", showImage)
|
||||
// Trigger photo take
|
||||
$('.snap').on('click', function() {
|
||||
videoToSnap()
|
||||
});
|
||||
|
||||
$( "#slider" ).slider({
|
||||
range: false,
|
||||
value: 100,
|
||||
animate: 300,
|
||||
min : 0,
|
||||
max : 255,
|
||||
change: function(event,ui){
|
||||
binary_level = ui.value
|
||||
doContrast()
|
||||
}
|
||||
});
|
||||
|
||||
$(".contrast").on("click",function(el){
|
||||
let btn = el.target
|
||||
let val = Number($(btn).attr("rel"))
|
||||
let new_binary_level = binary_level + val;
|
||||
console.log(`new_binary_level:${new_binary_level}`)
|
||||
if( new_binary_level >= 0 && new_binary_level <= 255){
|
||||
binary_level = new_binary_level
|
||||
$("#slider").slider("option","value",binary_level)
|
||||
binary_level = new_binary_level
|
||||
$("#slider").slider("option","value",binary_level)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
$("#imageList").on("click", showImage)
|
||||
$("#messages").on("click", showImage)
|
||||
|
||||
$("#send").on("click",function(){
|
||||
var cropCanvas = cropper.getCroppedCanvas();
|
||||
image_data = cropCanvas.toDataURL();
|
||||
$("#messages").html('<div class="alert alert-primary" role="alert">Sending...</div>')
|
||||
|
||||
$.ajax({
|
||||
timeout: 3000,
|
||||
url: url + "/image",
|
||||
method:"POST",
|
||||
dataType: "json",
|
||||
data:{
|
||||
image_data : image_data,
|
||||
text : $("#text").val()
|
||||
},
|
||||
|
||||
}).done(function(d,m,j){
|
||||
if( d.errors ){
|
||||
msg = d.errors.join(" / ")
|
||||
$("#messages").html(`<div class="alert alert-danger" role="alert">Something went wrong: ${msg}</div>`)
|
||||
return
|
||||
}
|
||||
$("#messages").html(`<div class="alert alert-success" role="alert">OK, your image will be available in a few seconds as <a href="#${d.hash_name}" class="hash_name btn btn-sm btn-secondary" rel="${d.hash_name}">${d.hash_name}</a></div>`)
|
||||
imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList")) : []
|
||||
imageList.push(d.hash_name)
|
||||
localStorage.setItem("imageList",JSON.stringify(imageList))
|
||||
refreshImageList()
|
||||
})
|
||||
.fail(function(d,m,jq){
|
||||
$("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
$('#uploadBtn').on('click', function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
//trigger default file upload button
|
||||
uploadInput.click();
|
||||
});
|
||||
|
||||
$('#uploadInput').on('change', function() {
|
||||
//retrieve selected uploaded files data
|
||||
var files = $(this)[0].files;
|
||||
processFiles(files);
|
||||
return false;
|
||||
});
|
||||
|
||||
refreshImageList()
|
||||
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue