I'm currently in the process of building a meme generator. The idea is that when a user clicks a button, a meme will be generated. However, if the user has not selected an image, an empty image is created instead. To prevent this, I need to implement some sort of check to verify whether the image has been chosen.
Below is the code used to select the image:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.blah')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
Following this, I am attempting to create a check to determine if the src attribute is set. Despite my efforts, the code continues to execute and produce an empty image:
function createMeme(){
let make = $('.blah');
let out = $('#img-out > img');
if (make.src) {
return "oijoijojioij";
} else {
html2canvas([document.getElementById('gen-img')], {
onrendered: function (canvas) {
var imagedata = canvas.toDataURL('image/png");
var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
//ajax call to save image inside folder
$.ajax({
url: 'save-image.php',
data: {
imgdata:imgdata
},
type: 'post',
success: function (response) {
console.log(response);
out.attr('src', response);
}
})
}
});
}
}