Skip to content

Instantly share code, notes, and snippets.

@rayinla
Created May 30, 2018 18:15
Show Gist options
  • Save rayinla/252927a8828a4f5c10baa6293bded06d to your computer and use it in GitHub Desktop.
Save rayinla/252927a8828a4f5c10baa6293bded06d to your computer and use it in GitHub Desktop.
let $photoInput = document.getElementById("input");
let image = new Image();
let $editor = document.getElementById("editor");
let $editorCtx = $editor.getContext("2d");
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);
}
$photoInput.addEventListener("change", e => {
let file = e.target.files[0];
createImageBitmap(file).then(bitmap => {
$editor.width = bitmap.width;
$editor.height = bitmap.height;
$editorCtx.drawImage(bitmap, 0, 0);
opacitor(257);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment