Image effects to canvas image not save with php upload but applies to download of same canvas file

Question

Here is a youtube video showing the problem: https://www.youtube.com/watch?v=znzLQSYlsKM.

I give links to all code involved in the video description.

I'm using a js library to apply affects to an image. Then I'm triggering an event that gives the user a download link, and dynamically creates a form element with the base64 for the image. I then pass that to a php file and save it to a folder. The image you can download has the effect applied to it, but the one that is saved is saved without the effect. The problem is they are both the same exact file.

JS Code:

function showDownload(canvas){
    //this is how i send it to my main page and use ajax script to upload to the php file.

    var url = canvas.toDataURL("image/png;base64;");
    $('<input/>').attr({
         type: 'hidden', id: 'fileroast', name: 'fileroast', value: url
    }).appendTo('#output');

    // this is how i link the download file
    downloadImage.off('click').click(function(){
        var url = canvas.toDataURL("image/png;base64;");
        downloadImage.attr('href', url);
    }).fadeIn();

}

the filter code:

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();
            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();
});

Answer 1

Here is the answer.

    function submitForm() {

      var fd = '';



      if(get_user != logged_username){



        }else{

        var d = new Date();

        var time = d.getTime();

        var fd = new FormData(document.getElementById("fileinfo"));



        $.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{

              console.log(data);

              var post = {"pic_location":data, "time":time, "username": logged_username};

              var json_data = post;

              Cynergi.insert('http://thewaywardjourney.com:3000/profile_pictures', json_data);

              $( "#fileroast" ).remove();

            //this is where we save the photos location to the db for retrieveal.

            }

        });

        return false;

    }

   }

script.js

var apply = $('#apply');



function showDownload(canvas){

    apply.off('click').click(function(){

        var url = canvas.toDataURL("image/png;base64;");

        $('<input/>').attr({type: 'hidden', id: 'fileroast', name: 'fileroast', value: url}).appendTo('#output');

        console.log(url);   

        console.log('apply');

    }).fadeIn();

}



function hideDownload(){

    downloadImage.fadeOut();

}

modal hhtml

<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="photo">





              </div>



              <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>

            <div class="modal-footer">

              <button id='apply' class="btn btn-info">Upload</button>

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>



            </div>

        </div>

    </div>

  </form>

</div>    

php

<?php

    // requires php5

    define('UPLOAD_DIR', 'images/profile_images/');

    $img = $_POST['fileroast'];

    $img = str_replace('data:image/png;base64,', '', $img);

    $img = str_replace(' ', '+', $img);

    $data = base64_decode($img);

    $files = UPLOAD_DIR . uniqid() . '.png';

    $success = file_put_contents($files, $data);

    print $files;

    //print $file ? 'default':'images/profile_images/default.png';

?>