JS函数交换图像

Question

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该图像最有可能在网页上显示的内容以及每个图像的概率。我的 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;
}

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

Answer 2

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

JS函数交换图像

JS Function to swap Image

javascript

html

materialize

tensorflow.js