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