Skip to content

Instantly share code, notes, and snippets.

@navdeepsingh

navdeepsingh/gpix.js

Forked from rayinla/gpix.js
Created July 24, 2018 04:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save navdeepsingh/0d95edf3c0e90708380739bc1a3ba646 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save navdeepsingh/0d95edf3c0e90708380739bc1a3ba646 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @rayinla rayinla created this gist May 30, 2018.
    33 changes: 33 additions & 0 deletions gpix.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    let $photoInput = document.getElementById("input");
    let fileReader = new FileReader();
    let image = new Image();
    let $editor = document.getElementById("editor");
    let $editorCtx = $editor.getContext("2d");

    //This is a performance test
    function opacitor(op) {
    let imgData = $editorCtx.getImageData(0, 0, $editor.width, $editor.height);
    for (let x = 0; x < image.width; x++) {
    for (let y = 0; y < image.height; y++) {
    let index = (x + y * image.width) * 4;
    imgData.data[index + 3] = op;
    }
    }

    $editorCtx.putImageData(imgData, 0, 0);
    }

    image.addEventListener("load", e => {
    $editorCtx.drawImage(image, 0, 0);
    opacitor(23);
    });

    fileReader.addEventListener("load", e => {
    let base64 = e.target.result;
    image.src = base64;
    });

    $photoInput.addEventListener("change", e => {
    let file = e.target.files[0];
    fileReader.readAsDataURL(file);
    });