麻煩與插件米姆發生器和輸入文件

我試圖整合插件演示在這裏：http://makg10.github.io/jquery-meme-generator/ JS代碼和READ.ME這裏：麻煩與插件米姆發生器和輸入文件

(function($){ 

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

服務器端和客戶端，它爲我工作，如果我直接把我的HTML中的圖像的網址。

如果我使用它也適用，但圖像不會調整大小上傳。我對畫布非常不好，我根本不知道我是否可以直接在插件代碼中處理圖像的大小，或者如果必須使用其他功能「調整」圖像的大小「？（）

非常感謝您的幫助

來源

2016-04-12 Zigo Zigomario

「meme generator」......呵呵。你是否也遇到了一個特定的錯誤，或者只是詢問一個關於你應該如何繼續的廣泛問題？如果您確實有錯誤，請嘗試縮小它發生的位置。 – Bloodied

最後，解決方案是客戶端。這是關於上傳之前的圖像大小調整...沒有更多。答案在上面的很多主題中已經存在。抱歉。無論如何，這裏是代碼：

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

來源

2016-04-13 16:42:10

麻煩與插件米姆發生器和輸入文件

回答

相關問題