用javascript替換圖像

Question

我對網絡編碼非常陌生，我正在努力做一些工作。

我想用一個簡單的功能做一個小網頁，用用戶從他自己的計算機中選擇的圖像替換頁面上的現有圖像。所有這些預計將在離線狀態下完成。但是，我不知道如何......

我該如何解決這個問題？

p.s.離線我的意思是，我期望這可以在本地完成，無需上傳到服務器或任何東西。我應該把這個小小的頁面放在USB棒上，以便它可以用作一個小工具。

Answer 1

This (readAsDataURL)是你在找什麼。

見工作示例here

在附加的例子中，你可以上傳你的發送所選圖像的BASE64數據也。

沒有主題：大多數客戶正在尋找一個移動網絡應用程序，一個應用程序從手機拍照併發送到服務器。在網絡應用程序中不完全可行。

Answer 2

好吧。您將需要實現文件上傳功能。 如果是的話，你可以使用http://www.uploadify.com/ 然後你會使用onUploadSuccess方法來改變圖像。

當你說脫機？你的意思是沒有互聯網連接，或者網頁是否會像內聯網一樣存在於服務器上？

............只需添加到我自己的答案........

OK，所以你需要一個USB接口。爲什麼不在USB上安裝獨立的服務器就可以運行PHP。

http://www.server2go-web.de/index.html

http://www.uwamp.com/en/

$("#file_upload").uploadify({ 
      height  : 30, 
      width   : 120, 
      swf   : 'include/fileuploader/uploadify.swf', 
      uploader  : 'include/fileuploader/uploadify.php', 
      'onUploadSuccess' : function(file, data, response) { 
       console.log('The file was saved to: ' + data); 
       $("#img-preview").html("<img src='"+data+"' />"); 

      } 
}); 

Answer 3

你可以使用下面的JavaScript來做到這一點：

<script> 

    function changeImage(newimage) 
    { 
    image = document.getElementById('oldimage'); 
    image.src = newimage; 
    } 

</script> 

Answer 4

我想我會展示一個代碼示例，因爲這是StackOverflow的想法。我希望它能說明這件事情是如何運作的。

而不是依賴於一組插件和庫，你會發現，它可能更容易與本地JavaScript。如果你願意的話，你可以將jQuery添加到事件處理組合中，不管怎樣，它在web-dev工具箱中都是非常標準的。

HTML

首先讓我們添加HTML爲input和一個佔位符img元素。你當然可以動態地添加img文件與jQuery或原生js。

<input id='ourfile' type='file' /> 

<!-- The image placeholder for our preview --> 
<img id='preview' src='' />  

的Javascript

// Lets cache our two elements of interest. 
ourfile = document.getElementById('ourfile'); 
preview = document.getElementById('preview'); 

// Create an instance of the 'native' FileReader. 
fr = new FileReader(); 

// When our input triggers change (i.e. image is selected) load the file using the file reader. 
ourfile.onchange = function() { 
    file = ourfile.files[0]; 
    fr.readAsDataURL(file); 
} 

// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image). 
fr.onload = function(){ 
preview.src = fr.result; 
} 

詳細

在@ Akki619的答案的鏈接顯示關於檢查圖像的有效性等方面的細節

小提琴

這裏是一個鏈接到一個工作示例： http://jsfiddle.net/rUvUX/4/