snap2laz/js/canvas.js

$(document).ready(function(){

  var binary_level = 100
  var url = document.location.origin
  var cropper = null
  var snap = null
  var width;
  var height;

  // 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 errBack = function(e) {
    console.log('An error has occurred!', e)
  };

  /**
  Take a new snapshot from the camera and store it
  **/
  function doSnap(){
    cropper && cropper.destroy()
    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()
    //$('html, body').animate({scrollTop: $("#result").offset().top}, 2000);

    cropper = new Cropper(canvas,{
      viewMode: 3,
      autoCropArea: 1
    });
  }

  function doContrast(){
    cropper && cropper.destroy()
    context.putImageData(snap,0,0)
    binary(context)
    cropper = new Cropper(canvas,{
      viewMode: 3,
      autoCropArea: 1
    });
  }

  // https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js

  var videoElement = document.querySelector('video');
  var videoSelect = document.querySelector('select#videoSource');
  videoSelect.onchange = getStream;
  getStream().then(getDevices).then(gotDevices);

  function getDevices() {
    // AFAICT in Safari this only gets default devices until gUM is called :/
    return navigator.mediaDevices.enumerateDevices();
  }

  function gotDevices(deviceInfos) {
    window.deviceInfos = deviceInfos; // make available to console
    for (const deviceInfo of deviceInfos) {
      const option = document.createElement('option');
      option.value = deviceInfo.deviceId;
      option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
      videoSelect.appendChild(option);
    }
  }


  function getStream() {
    if (window.stream) {
      window.stream.getTracks().forEach(track => {
        track.stop();
      });
    }
    const videoSource = videoSelect.value;
    const constraints = {
      video: {deviceId: videoSource ? {exact: videoSource} : undefined}
    };
    return navigator.mediaDevices.getUserMedia(constraints).
      then(gotStream).catch(handleError);
  }

  function gotStream(stream) {
    window.stream = stream; // make stream available to console
    videoSelect.selectedIndex = [...videoSelect.options].
      findIndex(option => option.text === stream.getVideoTracks()[0].label);
    videoElement.srcObject = stream;
  }

  function handleError(error) {
    console.error('Error: ', error);
  }
  // https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js
  function setCameraResolution( track ){
    width = track.getSettings().width
    height = track.getSettings().height
    $("#video").attr("width",width)
    $("#video").attr("height",height)
    $("#canvas").attr("width",width)
    $("#canvas").attr("height",height)
  }

  // Put video listeners into place
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
      //video.src = window.URL.createObjectURL(stream);
      video.srcObject = stream;
      setCameraResolution(stream.getVideoTracks()[0])
      video.play();
    });
  }
  /* Legacy code below! */
  else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(mediaConfig, function(stream) {
      setCameraResolution(stream.getVideoTracks()[0])
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(mediaConfig, function(stream){
      setCameraResolution(stream.getVideoTracks()[0])
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia(mediaConfig, function(stream){
      setCameraResolution(stream.getVideoTracks()[0])
      video.src = window.URL.createObjectURL(stream);
      video.play();
    }, errBack);
  }

  // Trigger photo take
  $('.snap').on('click', function() {
    doSnap()
  });
  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 ){
              image.data[i*4 + 0] = 255;
              image.data[i*4 + 1] = 255;
              image.data[i*4 + 2] = 255;
          }else{
              image.data[i*4 + 0] = 0;
              image.data[i*4 + 1] = 0;
              image.data[i*4 + 2] = 0;
          }
      }
      context.putImageData(image, 0,  0);

  }
  $("#result").hide()

  $( "#slider" ).slider({
    range: false,
    values: [ binary_level ],
    min : 0,
    max : 255,
    change: function(event,ui){
        binary_level = ui.value
        doContrast()
      }
  });
  $("#send").on("click",function(){
    var cropCanvas = cropper.getCroppedCanvas();
    image_data = cropCanvas.toDataURL();
    $("#messages").html('<div class="alert alert-primary" role="alert">Sending...</div>')

    $.ajax({
        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 on ${d.hash_name}</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};
  ctx.clearRect(0,0,400,400);
  var zoom = 0.5;
  //ctx.save

  Point = function( l ){
    return {
      "x" : l[0],
      "y" : l[1],
      "color" : l[2]
    }
  }

  // Draws every segment received, except black colored target ones
  var drawSimu = function() {
    pointsList = document.pointsList
      if (pointsList.length > 0)
      {
        ctx.clearRect(0,0,400,400);
        lastpoint = 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()
          }
          lastpoint = point
        }
      }
  }
  function refreshImageList(){
    var imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList"))  : []
    html = ''
    for( id in imageList){
      hash_name = imageList[id]
      html += `<li><a href="#${hash_name}" class="hash_name" rel="${hash_name}">${hash_name}</a></li>`
    }
    $("#imageList").html(`<ul>${html}</ul>`)

  }
  refreshImageList()

  $("#imageList").on("click",function(e){
    var el = e.target
    var hash_name = $(el).attr("rel")
    var u  = `${url}/hash_name/${hash_name}`
    $.ajax({
      url: `${url}/hash_name/${hash_name}`,
      dataType: "json",

    }).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("")
        document.pointsList = d.points_list
        drawSimu()
      })
    .fail(function(d,m,jq){
        $("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
      })
  })



})