Ärger mit Plugin meme Generator und Eingabedateien

Question

Ich versuche hier ein Plugin Demo zu integrieren: http://makg10.github.io/jquery-meme-generator/ Der js Code und READ.ME hier:

https://jsfiddle.net/t6xu4pyf/1/

(function($){ 

    var i18n = { 
     topTextPlaceholder: "TEXTE HAUT", 
     bottomTextPlaceholder: "TEXT BAS", 

Server-Seite und Client, es funktioniert für mich, wenn ich direkt die URL eines Bildes in mein HTML setze.

Wenn ich verwenden, funktioniert es auch, außer dass das Bild nicht die Größe zum Hochladen ändert. Ich bin sehr sehr schlecht mit der Leinwand und ich weiß überhaupt nicht, ob ich an der Größe des Bildes direkt im Plugin-Code arbeiten kann oder wenn ich das Bild "vorher" mit anderer Funktion verändern muss?()

Vielen Dank für Ihre Hilfe

Answer 1

Schließlich Lösung Client-Seite. Es geht um die Bildgröße vor dem Upload ... nicht mehr. Die Antwort existiert bereits in vielen oben genannten Themen. Es tut uns leid. Wie auch immer, hier ist der 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); 
        });