HTML5 Game - Coloring dropped image file on canvas

Description

Coloring dropped image file on canvas
Demo

<!DOCTYPE html>
<html>
  <head>
    <title>Coloring Book</title>
    <style>
      body  {//from ww w .  j a va2s . c  o m
        margin: 0;
        padding: 0;
      }
      #drop  {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 0;
      }
      .button  {
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        display: inline-block;
        font-family: sans-serif;
        font-size: 24px;
        font-weight: bold;
        margin: 10px 0 0 10px;
        padding: 5px;
        position: relative;
        text-transform: uppercase;
        z-index: 1;
      }
    </style>
  </head>

  <body>
    <a id="save" class="button">Save</a>
    <canvas id="drop">
      <p>Fallback not supported.</p>
    </canvas>
    <script>
      let colouringBook = (function() {
  let drop = document.querySelector("#drop");
  let save = document.querySelector("#save");
  let ctx = drop.getContext('2d');
  let drawing;

  /* These are to set the canvas to full width */
  drop.height = window.innerHeight; 
  drop.width = window.innerWidth;
  let lineWidth = 5;

  drop.addEventListener('dragover', preventDefault);
  drop.addEventListener('dragenter', preventDefault);
  drop.addEventListener('drop', handleDrop);


  drop.addEventListener('mousedown', startPath);
  drop.addEventListener('mouseup', function() {
    drawing = false;
  });
  drop.addEventListener('mousemove', handleDrawing);

  save.addEventListener('click', saveCanvas);

  function preventDefault(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }
    return false;
  }

  function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = "copy";

    let file = e.dataTransfer.files[0];
    let image = new Image();

    let reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = (function() {
      return function(e)  {
        image.src = e.target.result;
      };
    })();

    image.onload = function() {   
      ctx.drawImage(image, 0, 0);  
      let originalData = ctx.getImageData(0, 0, drop.width, drop.height);
      findEdges(originalData);
    };
  }

  function findEdges(originalData) {
    let output = ctx.createImageData(drop.width, drop.height);

    let w = originalData.width, h = originalData.height;
    let inputData = originalData.data;
    let outputData = output.data;
    let threshold = 100;

    // edge detection
    for (let y = 0; y < h; y += 1) {
      for (let x = 0; x < w; x += 1) {
        let i = (y * w + x) * 4;

        outputData[i] = inputData[i - w*4 - 4] +   inputData[i - w*4] + inputData[i - w*4 + 4] +
                inputData[i - 4]       -   8*inputData[i]     + inputData[i + 4] +
                inputData[i + w*4 - 4] +   inputData[i + w*4] + inputData[i + w*4 + 4];

        if (outputData[i] < threshold)
        {
          outputData[i] = 255;
          outputData[i+1] = 255;
          outputData[i+2] = 255;
        }
        else
        {
          outputData[i] = 0;
          outputData[i+1] = 0;
          outputData[i+2] = 0;
        }
        outputData[i + 3] = 255; // alpha
      }
    }

    // put the image data back after manipulation
    ctx.putImageData(output, 0, 0);
  }

  function startPath(e)  {
    ctx.strokeStyle = "#0000ff";
    ctx.lineWidth   = lineWidth;
    ctx.beginPath();
    ctx.moveTo(e.clientX + lineWidth, e.clientY + lineWidth);
    drawing = true;
  }

  function handleDrawing(e)  {
    if (drawing == true)
    {
      ctx.lineTo(e.clientX + lineWidth, e.clientY + lineWidth);
      ctx.stroke();
    }
  }

  function saveCanvas()  {
    let img = drop.toDataURL("image/png");
    save.href = img;
    save.download = "http://java2s.com/style/download.png";
  }

})();
      </script>
  </body>
</html>
HTML5 Game - Coloring dropped image file on canvas

Description

Demo

Related Topic
