diff --git a/index.html b/index.html index 3a3cef1..895c478 100644 --- a/index.html +++ b/index.html @@ -13,19 +13,7 @@ #canvas { display: block; } span.ui-slider-handle.ui-corner-all.ui-state-default { background: dodgerblue;} canvas#simuCanvas {background: #333;} - div.select { - display: inline-block; - margin: 0 0 1em 0; - } - - p.small { - font-size: 0.7em; - } - - label { - width: 12em; - display: inline-block; - } + .row {margin: 24px 0;} @@ -37,30 +25,38 @@
-
+
-
+

Convert your photos to laser images!

-

Once you allow the browser to use your camera, you can start creating something new by taking a snapshot.

+

Create something fresh by allowing the browser to use your camera.

+

Or pick an image from your phone and upload it.

If you're happy with the result, send it to see it converted to a laser-ready image!

- +
+
+ +
+
+ + +
+
-
-
-
- -
+ +
+ +
-
+
-
-

Preview your creation

-

Now that your creation have been sent, you can check what they will look like on lasers using these links, sorted by oldest snaps last.

+
+

Preview your creations

+

Now that your creation have been sent, you can check what they will look like on lasers using these links, sorted by oldest snaps last.

@@ -98,14 +109,12 @@
- - - - - + + + diff --git a/js/canvas.js b/js/main.js similarity index 63% rename from js/canvas.js rename to js/main.js index 60aa04c..4f66aec 100644 --- a/js/canvas.js +++ b/js/main.js @@ -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= 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; iSending...
') - - $.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(``) - return - } - $("#messages").html(``) - 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(``) - - }) - }) - - - 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 += `
  • ${hash_name}
    • ` } $("#imageList").html(`
      ${html}
    `) - } - 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('') + + $.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(``) + return + } + $("#messages").html(``) + 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(``) + + }) + }) + + $('#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() + })