1

I'm currently trying to make a program with javascript and html codes where you can input an image URL and with the click of the submit button, it will grayscale the image using the URL as the input. The problems I'm having is trying to connect the the URL as a variable input and creating a function with the button to display the grayscale image. I lost my experience in this field so I do apologize if it looked like an amateur made this. If there's anymore problems that I overlooked and didn't mention in the code, any help will be greatly appreciated. I tried using examples for broad functions so I can recreate it for my program.

<!DOCTYPE html>
<html>
<head>
<style>
var imgObj = document.getElementById('js-image');
function gray(imgObj) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');
     
    var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas.width = imgW;
    canvas.height = imgH;
     
    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
     
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}



var image = document.getElementById("img");
var imageSrc = image.getAttribute("src");
image.setAttribute("src", imageSrc + randomNumber);
</style>
</head>
<body>

<p>Insert image URL: <input type="img" src=img></p>
<button onclick=button;">Submit</button>

<script>
function button() {
  var x = document.getElementById("imgObj");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>
Lucvinhlong
  • 11
  • 2
  • 1
    Have you already tried `input type="text"`? I was surprised to see `input type="img"` because that is used for buttons. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – BenjaminGolder May 17 '20 at 22:48
  • I did, but then comes the button function. Nothing happens after i pressed Submit button. I know that there is no code for the button, but i just don't know what to put in for it. I'm lost honestly. – Lucvinhlong May 17 '20 at 23:09
  • You'll probably need to use Javascript to retrieve the image based on the url. Using Javascript, you could take the input URL and perhaps append an `img` tag and set the `src` attribute equal to the input URL. Once that img has loaded, you can get the data from it and start processing it. – BenjaminGolder May 18 '20 at 00:26
  • so should i make a separate file and put Javascript in there or put it here? sorry for asking so much, I'm just not that good and maybe an example can help in case if there's any extras that i don't need? – Lucvinhlong May 18 '20 at 00:30
  • You can put the javascript inside your `button` function. You might want to search around for ways to use javascript to get an image using a url. You should be able to find some good examples. Here's an example of getting the height and width of an image with JS: https://stackoverflow.com/questions/11442712/get-width-height-of-remote-image-from-url Instead of getting height and width, you'll want to get the image element and use it in your gray function – BenjaminGolder May 18 '20 at 00:45
  • thank you Ben, hope it works and have a good day to you as well as others out there! – Lucvinhlong May 18 '20 at 00:58

0 Answers0