Skip to content

Instantly share code, notes, and snippets.

@rayinla
Created May 30, 2018 17:35
Show Gist options
  • Save rayinla/f863de0e6ac138c5810a4a844ffcca87 to your computer and use it in GitHub Desktop.
Save rayinla/f863de0e6ac138c5810a4a844ffcca87 to your computer and use it in GitHub Desktop.
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment