Trouble with plugin meme generator and input files - image

Question

I try to integrate a plugin
Demo here: http://makg10.github.io/jquery-meme-generator/
The js code and read.me here:
https://jsfiddle.net/t6xu4pyf/1/
(function($){
var i18n = {
topTextPlaceholder: "TEXTE HAUT",
bottomTextPlaceholder: "TEXT BAS",
Server side and client, it works for me if I put directly the url of an image in my html.
If I use
It also works except that the image does not resize to upload.
I'm very very bad with the canvas and I do not know at all if I can work on the size of the image directly in the plugin code or if I have to resize the image "before" with other function? ()
Thank you very much for your help

Answer 1

Finally, solution was client side.
It is about the image resize before upload ... no more.
The answer already existed in many topic above. Sorry.
Anyway, here's the code:
function readURL(input) {
if (input.files && input.files[0]) {
var current_file = input.files[0];
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.onload = function () {
var maxWidth = 500,
maxHeight = 500,
imageWidth = image.width,
imageHeight = image.height;
if (imageWidth > imageHeight) {
if (imageWidth > maxWidth) {
imageHeight *= maxWidth / imageWidth;
imageWidth = maxWidth;
}
}
else {
if (imageHeight > maxHeight) {
imageWidth *= maxHeight / imageHeight;
imageHeight = maxHeight;
}
}
var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;
image.width = imageWidth;
image.height = imageHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
$('#example').attr('src', canvas.toDataURL(current_file.type));
}
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputfiles").change(function(){
readURL(this);
});