From da38789b233b79a0a9b32f32749bc8567fa5cf2b Mon Sep 17 00:00:00 2001
From: Amine A <15179425+AmineI@users.noreply.github.com>
Date: Mon, 15 Jun 2020 18:58:29 +0200
Subject: [PATCH 1/2] Add a button to view the image as grayscale
Using the grayscale function from MDN Web docs
---
iview.html | 19 +++++++++++++++++--
1 file changed, 17 insertions(+), 2 deletions(-)
diff --git a/iview.html b/iview.html
index e22edf0..39262a8 100644
--- a/iview.html
+++ b/iview.html
@@ -20,7 +20,10 @@
-Open image:
+
+Open image:
+
+
@@ -63,7 +66,19 @@
+ p[2] + 'Alpha: ' + p[3]+" | ";
return {x, y};
}
-
+
+var grayscale = function() {
+ var imageData= ctx.getImageData(0, 0, cvs.width, cvs.height)
+ var data= imageData.data
+ for (var i = 0; i < data.length; i += 4) {
+ var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+ data[i] = avg; // red
+ data[i + 1] = avg; // green
+ data[i + 2] = avg; // blue
+ }
+ ctx.putImageData(imageData, 0, 0);
+};
+
function handleImageFiles(e) {
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
From 633d04ea88b3a3d8da94e1327c6204a82051cc41 Mon Sep 17 00:00:00 2001
From: Amine A <15179425+AmineI@users.noreply.github.com>
Date: Mon, 15 Jun 2020 20:05:07 +0200
Subject: [PATCH 2/2] Add support for pasting an image to the page
Adding files like that does not fire a change event for the input, so a modification of handleImageFiles() was required
---
iview.html | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/iview.html b/iview.html
index 39262a8..0699af1 100644
--- a/iview.html
+++ b/iview.html
@@ -41,6 +41,10 @@
window.onload = function() {
var inputImage = document.getElementById('inputImage');
inputImage.addEventListener('change', handleImageFiles, false);
+ window.addEventListener('paste', e => {
+ inputImage.files = e.clipboardData.files
+ handleImageFiles()
+ },false)
}
function copyMousePos(evt) {
@@ -79,8 +83,8 @@
ctx.putImageData(imageData, 0, 0);
};
-function handleImageFiles(e) {
- var url = URL.createObjectURL(e.target.files[0]);
+function handleImageFiles() {
+ var url = URL.createObjectURL(inputImage.files[0]);
var img = new Image();
img.onload = function() {
cvs.width = img.width;