Uploading a cloned canvas photo by dynamically creating a html file element with the default value being the canvas image

Question

I'm trying to apply image filters to an image and have the file element be recreated every time a filter is clicked. Thus, the would be pseudo code. Its still saying the file field is null and im not sure why.

I'm trying to pass the file to my php script that handles uploads but im not sure how to do that in the script because my javascript skills aren't good enough..

HTML

<div id="uploadPic" class="modal fade" >
  <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:#f3f3f3;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" style="color:black;">Choose picture to upload as profile pic.</h4>          
            </div>
            <div class="modal-body">
              <div id="filterContainer" style='width:400px;'>
                <ul id="filters" style='width:400px;'>
                  <li> <a href="#" id="normal">Normal</a> </li>
                  <li> <a href="#" id="vintage">Vintage</a> </li>
                  <li> <a href="#" id="lomo">Lomo</a> </li>
                  <li> <a href="#" id="clarity">Clarity</a> </li>
                  <li> <a href="#" id="sinCity">Sin City</a> </li>
                  <li> <a href="#" id="sunrise">Sunrise</a> </li> 
                  <li> <a href="#" id="crossProcess">Cross Process</a> </li>
                  <li> <a href="#" id="orangePeel">Orange Peel</a> </li>
                  <li> <a href="#" id="love">Love</a> </li>
                  <li> <a href="#" id="grungy">Grungy</a> </li>
                  <li> <a href="#" id="jarques">Jarques</a> </li>
                  <li> <a href="#" id="pinhole">Pinhole</a> </li>
                  <li> <a href="#" id="oldBoot">Old Boot</a> </li>
                  <li> <a href="#" id="glowingSun">Glowing Sun</a> </li>
                  <li> <a href="#" id="hazyDays">Hazy Days</a> </li>
                  <li> <a href="#" id="herMajesty">Her Majesty</a> </li>
                  <li> <a href="#" id="nostalgia">Nostalgia</a> </li>
                  <li> <a href="#" id="hemingway">Hemingway</a> </li>
                  <li> <a href="#" id="concentrate">Concentrate</a> </li>
                </ul>
              </div>
              <div id='output_file'></div>
              <div id="output"></div>
              <div id="photo">
                <a href="#" class="downloadImage" target="_blank" download="photo.png">Download Image</a>-
              </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" value="Upload" class="btn btn-info" data-dismiss="modal" onClick="return submitForm();"/> 
            </div>
        </div>
    </div>
  </form>
</div> 

JavaScript:

$(function() {
    /*
        In this code, we are going to do the following:
        1. Accept an image on drag and drop
        2. Create a new canvas element (original), with a max size
           of 500x500px (customizable) and keep it in memory
        3. Listen for clicks on the filters. When one is selected:
                3.1 Create a clone of the original canvas
                3.2 Remove any canvas elements currently on the page
                3.3 Append the clone to the #photo div
                3.4 If the selected filter is different from the "Normal"
                    one, call the Caman library. Otherwise do nothing.
                3.5 Mark the selected filter with the "active" class
        4. Trigger the "Normal" filter
    */
    var maxWidth = 500,
        maxHeight = 500,
        photo = $('#photo'),
        originalCanvas = null,
        filters = $('#filters li a'),
        filterContainer = $('#filterContainer');
    // Use the fileReader plugin to listen for
    // file drag and drop on the photo div:
    photo.fileReaderJS({
        on:{
            load: function(e, file){
                // An image has been dropped.
                var img = $('<img>').appendTo(photo),
                    imgWidth, newWidth,
                    imgHeight, newHeight,
                    ratio;
                // Remove canvas elements left on the page
                // from previous image drag/drops.
                photo.find('canvas').remove();
                filters.removeClass('active');

                // When the image is loaded successfully,
                // we can find out its width/height:
                img.load(function() {
                    imgWidth  = this.width;
                    imgHeight = this.height;
                    // Calculate the new image dimensions, so they fit
                    // inside the maxWidth x maxHeight bounding box
                    if (imgWidth >= maxWidth || imgHeight >= maxHeight) {
                        // The image is too large,
                        // resize it to fit a 500x500 square!
                        if (imgWidth > imgHeight) {
                            // Wide
                            ratio = imgWidth / maxWidth;
                            newWidth = maxWidth;
                            newHeight = imgHeight / ratio;
                        } else {
                            // Tall or square
                            ratio = imgHeight / maxHeight;
                            newHeight = maxHeight;
                            newWidth = imgWidth / ratio;
                        }
                    } else {
                        newHeight = imgHeight;
                        newWidth = imgWidth;
                    }
                    // Create the original canvas.
                    originalCanvas = $('<canvas>');
                    var originalContext = originalCanvas[0].getContext('2d');
                    // Set the attributes for centering the canvas
                    originalCanvas.attr({
                        width: newWidth,
                        height: newHeight
                    }).css({
                        marginTop: -newHeight/2,
                        marginLeft: -newWidth/2
                    });
                    // Draw the dropped image to the canvas
                    // with the new dimensions
                    originalContext.drawImage(this, 0, 0, newWidth, newHeight);
                    // We don't need this any more
                    img.remove();
                    filterContainer.fadeIn();
                    // Trigger the default "normal" filter
                    filters.first().click();
                });
                // Set the src of the img, which will
                // trigger the load event when done:
                img.attr('src', e.target.result);
            },
            beforestart: function(file){
                // Accept only images.
                // Returning false will reject the file.
                return /^image/.test(file.type);
            }
        }
    });
    // Listen for clicks on the filters
    filters.click(function(e){
        e.preventDefault();
        var f = $(this);
        if(f.is('.active')){

            // Apply filters only once
            return false;
        }
        filters.removeClass('active');
        f.addClass('active');
        // Clone the canvas
        var clone = originalCanvas.clone();
        // Clone the image stored in the canvas as well
        clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);
        // Add the clone to the page and trigger
        // the Caman library on it
        photo.find('canvas').remove().end().append(clone);
        var effect = $.trim(f[0].id);
        Caman(clone[0], function () {
            // If such an effect exists, use it:
            if( effect in this){
                this[effect]();
                this.render();
        var url = clone[0].toDataURL("image/png;base64;");
        $("#output_file").html('<input type="file" name="file" value="'+url+'" required / >');
                // Show the download button
                showDownload(clone[0]);
            }
            else{
                hideDownload();
            }
        });
    });
    // Use the mousewheel plugin to scroll
    // scroll the div more intuitively
    filterContainer.find('ul').on('mousewheel',function(e, delta){
        this.scrollLeft -= (delta * 50);
        e.preventDefault();
    });
    var downloadImage = $('a.downloadImage');
    function showDownload(canvas){
        downloadImage.off('click').click(function(){
            // When the download link is clicked, get the
            // DataURL of the image and set it as href:
            var url = canvas.toDataURL("image/png;base64;");
            downloadImage.attr('href', url);
        }).fadeIn();
    }
    function hideDownload(){
        downloadImage.fadeOut();
    }
});

PHP:

<?php
$username = $_POST["username"];
$timestamp = $_POST["timestamp"];
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        #echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $username.$timestamp.$_FILES["file"]["name"];
        #echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        #echo "Type: " . $_FILES["file"]["type"] . "<br>";
        #echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        #echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
        if (file_exists("images/profile_images/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "images/profile_images/" . $filename);
            echo "images/profile_images/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

As per Rayon's Comment I'm doing the following:

This is appending the base64 to the form data on my main page every time a filter is clicked. Thus, when someone clicks upload it will send that data to the pho script.

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("file_upload", clone[0].toDataURL("image/png;base64;"));

Here is my current JavaScript for handling the AJAX request:

function submitForm() {
  if (get_user != logged_username) {} else {
    var d = new Date();
    var time = d.getTime();
    //console.log(document.getElementById("file"));
    var fd = new FormData(document.getElementById("fileinfo"));
    //console.log(fd);
    fd.append("username", logged_username);
    fd.append("timestamp", time);
    $.ajax({
      url: "upload_photo.php",
      type: "POST",
      data: fd,
      enctype: 'multipart/form-data',
      processData: false, // tell jQuery not to process the data
      contentType: false // tell jQuery not to set contentType
    }).done(function(data) {
      if (data.indexOf("Invalid") >= 0) {
        alert('invalid file type, must be jpeg, jpg, or png.');
      } else {
        var post = {
          "pic_location": data,
          "time": time,
          "username": logged_username
        };
        console.log(data);
        var json_data = post;
        Cynergi.insert('http://thhd.com:3000/profile_pictures', json_data);
        //this is where we save the photos location to the db for retrieveal.
      }
    });
    return false;
  }
}

and then the php:

<?php

    // requires php5
    define('UPLOAD_DIR', 'images/profile_images/');
    $img = $_POST['file_info'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    echo $file;
    print $success ? $file : 'Unable to save the file.';

?>

logging output shows:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAgAElEQ…P3PeerM0GN4J7vE4xyTdlT34hvfOMbuiYnL6xlqkUu4v8BZ033tp7lXCwAAAAASUVORK5CYII=

php returns unable to save file, and it saves a file with 0 bytes.

This works but it puts a file with 0 bytes and I'm not sure why.

Answer 1

There is no need to have a file input. You can draw image on the canvas and redraw it after every action of user and if you are willing to store that image then you need to manipulate Base64 data of image into image using php script..