通過傳遞URL來讀取/處理圖像 - 類似於PHP中的file_get_contents？

更新：通過傳遞URL來讀取/處理圖像 - 類似於PHP中的file_get_contents？

出於測試目的，我用

<input type="text" onClick="doProcess(http://www.abc.com/chart.png)" />

這並不工作（使用alert測試如果URL中傳遞的提示框沒有顯示的URL，但解碼失敗）。從某種意義上說，我自己回答了我的一部分問題。有關如何通過javascript讀取圖像文件的任何想法？tt

剛發現這是與HTML 5相關的代碼。另外我想既然我傳遞一個網址，而不是文件的列表，我需要請從doProcess()功能for()循環這將是

function doProcess(f) 
{ 
    var o=[]; 

      var reader = new FileReader(); 
     reader.onload = (function(theFile) { 
     return function(e) { 
      gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height); 

      qrcode.decode(e.target.result); 
     }; 
     })(f); 
     reader.readAsDataURL(f); 

}

但是，這並不工作太:(

ORIGINAL POST

我有一個輸入文件到其中QR圖像文件與供給。

<input type="file" onchange="doProcess(this.files)">

doProcess功能

function doProcess(f) 
{ 
    var o=[]; 

    for(var i =0;i<f.length;i++) 
    { 
     var reader = new FileReader(); 
     reader.onload = (function(theFile) { 
     return function(e) { 
      gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height); 

      qrcode.decode(e.target.result); 
     }; 
     })(f[i]); 
     reader.readAsDataURL(f[i]); 
    } 
}

此功能完美的作品。那裏沒有問題。此功能的目的是解碼QR圖像。現在出於純粹的興趣和好奇心，我打算做一些不同的事情 - 刪除需要手動瀏覽到圖像文件。這使我想到了幾個疑問：

是否有可能在與圖像的URL，而不是一個文件提供doProcess(f)執行相同的操作？目前f參數是一個文件。如果f參數是一個URL（，例如：doProcess（http://www.abc.com/abc.jpg））會發生什麼情況？我意識到在doProcess()裏面還有其他的支持功能也被調用來完成解碼過程，但我假設那些將相應地處理通過doProcess傳遞的數據類型。
如果f參數是一個圖像文件（在本地計算機上瀏覽並選擇）而不是圖像URL，那麼數據類型f是什麼？我猜這將是一個數組或以一些原始的二進制形式。

我的意圖是研究過程，並知道幕後發生了什麼。通過使用'瀏覽'功能，QR圖像被成功解碼。

總之，如果我傳遞存儲爲參數而不是文件的圖像的位置會發生什麼？

在此先感謝。

來源

2012-09-13 asprin

有一些問題，我不知道你有沒有在這裏，因爲它不是你的完整代碼，我不知道你到底在做什麼。這裏有一個非常接近你正在做的事情的例子。它加載了一個畫布上的圖像（你可以用你的QR碼，而不是東西）

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript"> 
     var gCanvas; 
     var gCtx; 
     function load(){ 
     console.log("loaded"); 
     gCanvas = document.getElementById("mcanvas"); 
     if (gCanvas.getContext){ 
      gCtx = gCanvas.getContext("2d"); 
     } else console.log("no Canvas?"); 
     } 
     function doProcess(f){ 
      var o=[]; 
      var reader = new FileReader(); 
      reader.onload = (function(theFile) { 
       var img = new Image(); 
       img.src = theFile; 
       img.onload = function(){ 
       gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height); 
       gCtx.drawImage(img,0,0); 
       } 
       return; 
      })(f); 

      console.log(reader); 
      reader.readAsDataURL(f); 
     } 
    </script> 
    </head> 

    <body onload="load()"> 
    <input type="text" onClick="doProcess('https://www.google.com.br/logos/2012/clara_schuman-2012-hp.jpg')" /> 
    <canvas id="mcanvas" height="500" width="500"></canvas> 
    </body> 
</html>

dont't忘記負載的功能，它賦予你的JavaScript的身體負荷後運行。

來源

2012-09-13 13:14:16

感謝您的回覆。我想要做的只是將存儲在服務器上的圖像url傳遞給'doProcess（）'函數。然後'doProcess'將使用'qrcode.decode（e.target.result）;'來解碼QR圖像。這是一個遠射，但是在這種情況下可以知道** e.target.result **的含義嗎？ – asprin

+1 btw代碼在畫布上繪製圖像。但我認爲'qrcode.decode（）'負責繪製圖像。 – asprin

在這種情況下，我不知道e.target屬性究竟是什麼，因爲'theFile'變量已經有了URL字符串，因此您可以直接將它放在qrcode.decode方法中。你正在做的一件事是返回一個函數，但不是以與讀取器相同的方式初始化。嘗試把： '返回（函數（e）中{ gCtx.clearRect（0，0，gCanvas.width，gCanvas.height）; qrcode.decode（e.target.result）; }）（F） ;' –

通過傳遞URL來讀取/處理圖像 - 類似於PHP中的file_get_contents？

回答

相關問題