Advanced Photo Editor

Example link icon

Basic Features

Step 1: Put an image on your page.
Step 2: Make a canvas.
Hint: Make a <canvas> tag. Set the width and height in HTML, not in CSS:
<canvas width="400" height="400"></canvas>
Step 3: Draw the image on the canvas.
Hint: Use the drawImage method. However, if you draw the image before it loads, it will not appear. So to be safe, you should also use the load event type:
// draw the image immediately
drawImage();

// in case the image wasn't loaded yet, draw the image after it loads
yourImageVariable.addEventListener("load", drawImage);

function drawImage() {
    // draw the image on the top left corner of the canvas
    yourCanvasVariable.getContext("2d").drawImage(yourImageVariable, 0, 0);
}

Step 4: Make buttons to change the red, green, and blue values of every pixel in the image.
Hint: Get the red, green, and blue values of every pixel in the image with the getImageData method.

Step 5: Make a button to invert the color of every pixel in the image.
Hint: Invert each of red, green, and blue separately. Invert a color value by setting it to 255 minus itself.

Step 6: Make a button to turn the image black and white.
Hint: Set the red, green, and blue values of every pixel in the image to that pixel's average color.

Step 7: Show the pixel's color when the canvas is clicked.
Hint: Use the mouse coordinates to get the correct pixel:
yourCanvasVariable.addEventListener("click", showColor);

function showColor(event) {
    // get the mouse coordinates relative to the canvas
    var x = event.offsetX;
    var y = event.offsetY;

    // write code here to show the pixel's color
}

Choose Picture from Computer

Step 1: Make a file input:
<input type="file">
Step 2: Add an input event listener to the file input, and use the following code to choose a file:
// create a new FileReader object
var reader = new FileReader();

// call loadFile when the file is loaded into the browser
reader.addEventListener("load", loadFile);

// load the first file chosen into the browser
reader.readAsDataURL(this.files[0]);
Then put the following function in your code and modify accordingly:
function loadFile() {
    // set the source of the image element to the chosen file
    yourImageVariable.src = this.result;

    // clear the canvas
    yourCanvasVariable.getContext("2d").clearRect(0, 0, yourCanvasVariable.width, yourCanvasVariable.height);

    // draw the image on the top left corner of the canvas
    yourCanvasVariable.getContext("2d").drawImage(yourImageVariable, 0, 0);
}

Take Picture from Webcam

Step 1: Put a video on your page. Download free vidoes from Pixabay.
Hint: Make a <video> tag:
<video src="yourVideoFile"></video>

Step 2: Make a button to play the video.
Hint: The video object has several methods. Play a video with the play method.

Step 3: Remove the video that you downloaded, and modify the button to stream the webcam to the video.
Hint: Use the following code and modify accordingly to stream the webcam to the video:
// built-in method for getting the webcam stream
window.navigator.mediaDevices.getUserMedia({
    // object specifying the dimensions of the webcam stream
    video: {
        width: yourCanvasVariable.width,
        height: yourCanvasVariable.height
    }
// send the webcam stream to the video element
}).then(streamWebcamToVideo);
Then put the following function in your code and modify accordingly:
function streamWebcamToVideo(stream) {
    // set the source object of the video element to the webcam stream
    yourVideoVariable.srcObject = stream;

    // play the video
    yourVideoVariable.play();
}
Step 4: Make a button to take a picture from the webcam.
Hint: Use the following code and modify accordingly to take a picture from the webcam:
// clear the canvas
yourCanvasVariable.getContext("2d").clearRect(0, 0, yourCanvasVariable.width, yourCanvasVariable.height);

// draw the current video frame on the top left corner of the canvas
yourCanvasVariable.getContext("2d").drawImage(yourVideoVariable, 0, 0);

Debugging help

Last topic Next topic