Function readSourceImage

wavyImage.js:227–291

()

//read and accept user input image
function readSourceImage(){

    //remove any existing images
    while (imageContainer.firstChild) {
        imageContainer.removeChild(imageContainer.firstChild);
    }

    if(playAnimationToggle == true){
        clearInterval(animationInterval);
        playAnimationToggle = false;
    }
        
    //read image file      
    var file = imageInput.files[0];
    var reader = new FileReader();
    reader.onload = (event) => {
        var imageData = event.target.result;
        var image = new Image();
        image.src = imageData;
        image.onload = () => {
          
            actualWidth = image.width;
            actualHeight = image.height;

            //image scaling
            if(actualWidth > maxImageWidth){
                scaledWidth = maxImageWidth;
                widthScalingRatio = scaledWidth / actualWidth;
                scaledHeight = actualHeight * widthScalingRatio;
            } else{
                scaledWidth = actualWidth;
                widthScalingRatio = 1;
                scaledHeight = actualHeight;
            }

            animation.width = scaledWidth;
            animation.height = scaledHeight;

            //resize the src variable of the original image
            var newCanvas = document.createElement('canvas');
            newCanvas.width = Math.floor(scaledWidth/2)*2; //video encoder doesn't accept odd numbers
            newCanvas.height = Math.floor(scaledHeight/8)*8; //video encoder wants a multiple of 8
            var ctx = newCanvas.getContext('2d');
            ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
        
            var resizedImgSrc = newCanvas.toDataURL();
    
            //draw the resized image onto the page
            originalImg = document.createElement('img');
            originalImg.setAttribute("id", "originalImg");
            originalImg.src = resizedImgSrc;
            originalImg.width = scaledWidth;
            originalImg.height = scaledHeight;
            imageContainer.appendChild(originalImg);

            setTimeout(createAnimation(),1000);
            animation.scrollIntoView({ behavior: "smooth" });