用于交换图像的 JS 函数答案

【问题标题】：JS Function to swap Image用于交换图像的 JS 函数
【发布时间】：2019-12-04 19:59:37
【问题描述】：

Using a pre-trained model for image classification, I created a webpage that in theory will allow the user to browse their computer for a image and when that image is selected, it is automatically processed and the top three responses for what that最有可能的图像以及每个图像的概率显示在网页上。我的 JS 函数可能非常错误，我有点自学。如果有帮助，我也会使用 materializecss 和 tensorflow.js。

我无法使用所选的用户图像更改我目前在那里硬编码的图像。

HTML

<div name="imagePost" class="offset-s1 col s6">
   <img class="responsive-img" id="changeImage" src="images/dog.jpg" alt="description">
   <input type="file"  name="pickImage" onchange="swapImage(pickImage)">
</div>

JS函数

function swapImage (pickImage) {
    var image_toShow = pickImage;

    document.getElementById('changeImage').innerHTML = image_toShow;
}

【问题讨论】：

stackoverflow.com/questions/4459379/… 我知道答案是 jQuery，但使用文件阅读器的基本思路
您是否只是将 innerHTML 设置为参数中提供的内容？或者，您是在构建图像标签吗？

标签： javascript html materialize tensorflow.js

【解决方案1】：

这里是如何交换图像

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

【讨论】：

【解决方案2】：

感谢您的帮助和建议。我最终使用了文件阅读器、事件监听器，并在另一个 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);
}

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

【讨论】：