Javascript 用于交换图像的JS函数

使用预先训练好的图像分类模型，我创建了一个网页，理论上用户可以在电脑上浏览一幅图像，当选择该图像时，它会被自动处理，该图像最有可能显示在网页上的前三个响应以及每个响应的概率。我的JS函数可能非常错误，我有点自学成才。如果有帮助的话，我也在使用materializecss和tensorflow.js

我在更改当前已硬编码的图像时遇到问题，无法使用用户选择的图像

HTML

---

以下是如何交换图像

function swapImage(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  const img = document.getElementById("changeImage");

  reader.onload = function(event) {
    img.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

---

以下是如何交换图像

function swapImage(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  const img = document.getElementById("changeImage");

  reader.onload = function(event) {
    img.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

---

谢谢你的帮助和建议。最后我使用了一个文件读取器eventlisteners，并在另一个js函数中创建了img标记。我会在下面分享它，以防它能帮助别人。因此html部分只有一个空div，js读取输入文件并用上传的照片创建一个img标记

<div name="imagePost" class="offset-s1 col s6">
                <fieldset>
                    <div id="changeImage">

                    </div>
                </fieldset>
                <input type="file"  id="pickImage">
                <a class="btn-large black col s4 offset-s1 unselect" onclick="app()">Calculate</a>
            </div>
        </div>

算计

window.onload=function（）
{
var y=document.getElementById（“pickImage”）；
y、 addEventListener（'change'，loadimage，false）；
}
函数imageHandler（e2）
{ 
var store=document.getElementById（'changeImage'）；
store.innerHTML=''；
}
函数加载映像（e1）
{
var filename=e1.target.files[0]；
var fr=new FileReader（）；
fr.onload=imageHandler；
fr.readAsDataURL（文件名）；
}

感谢您的帮助和建议。最后我使用了一个文件读取器eventlisteners，并在另一个js函数中创建了img标记。我会在下面分享它，以防它能帮助别人。因此html部分只有一个空div，js读取输入文件并用上传的照片创建一个img标记

<div name="imagePost" class="offset-s1 col s6">
                <fieldset>
                    <div id="changeImage">

                    </div>
                </fieldset>
                <input type="file"  id="pickImage">
                <a class="btn-large black col s4 offset-s1 unselect" onclick="app()">Calculate</a>
            </div>
        </div>

算计

window.onload=function（）
{
var y=document.getElementById（“pickImage”）；
y、 addEventListener（'change'，loadimage，false）；
}
函数imageHandler（e2）
{ 
var store=document.getElementById（'changeImage'）；
store.innerHTML=''；
}
函数加载映像（e1）
{
var filename=e1.target.files[0]；
var fr=new FileReader（）；
fr.onload=imageHandler；
fr.readAsDataURL（文件名）；
}

我知道答案是jQuery，但关于使用文件读取器的基本想法您是否只是将innerHTML设置为参数中提供的内容？或者，您是否正在构建图像标记？我知道答案是jQuery，但关于使用文件读取器的基本想法是您是否只是将innerHTML设置为参数中提供的内容？或者，您是否正在构建图像标记？

window.onload=function()
{
  var y = document.getElementById("pickImage");
  y.addEventListener('change', loadimage, false);
}

function imageHandler(e2) 
{ 
  var store = document.getElementById('changeImage');
  store.innerHTML='<img id="newImage" class="responsive-img" src="' + e2.target.result +'" alt="The image here is interchangeable, allowing for users to process many different images using the machine learning model.">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}