图像出现，然后在提交时消失

Image appears then disappears when submitted

本文关键字：提交 消失 然后 图像      更新时间：2023-09-26

我有一个接受图像网址的输入框，当单击提交按钮时，网址由javascript函数获取，该函数更新页面上的画布和图像对象。

图像

定位良好，它出现在图像对象和画布对象中，但不久之后就消失了。

 <canvas id = "edit_canvas" width = "600" height = "600"></canvas>
  <img src= "images/placeholder.png" alt="Image Cannot Be Displayed" id = "edit_pic">
  <form onsubmit = "submitImage()">
    Custom Picture: <input type="url" name="pic_url" id ="input_url"><br>
    <input type="submit">
  </form>
  <script type="text/javascript">
   function submitImage(){
       var img = new Image();
       var url = document.getElementById("input_url").value;
       img.src = url;
       img.onload = function(){
           alert("img has loaded");
           updateCanvas(img);
           document.getElementById("edit_pic").src = url;
       };   
   }
   function updateCanvas(img){
       alert("updateCanvas called");
       var c =document.getElementById("edit_canvas");
       var ctx=c.getContext("2d");
       ctx.drawImage(img,0,0);
   }
   </script>

我在其他地方使用了updateCanvas（）函数，在那里它工作正常并且图像保持不变。javascript 函数中的两个警报都按预期显示，但图像不会保留在画布/图像对象中。

您正在提交表单，这涉及重新加载页面，所以我想它会简要显示图像，然后重新加载，清空画布。

使用按钮上的onclick而不是表单上的onsubmit以避免重新加载，并通过从input type="submit"更改为button type="button"使按钮不提交表单：

<button type="button" onclick="submitImage()">Submit</button>

您可以阻止表单的提交操作或更改输入类型按钮并将提交图像功能附加到按钮的点击事件，并从表单提交中删除提交图像

{代码}

function submitImage(){
       var img = new Image();
       var url = document.getElementById("input_url").value;
       img.src = url;
       img.onload = function(){
           alert("img has loaded");
           updateCanvas(img);
           document.getElementById("edit_pic").src = url;
       };  
 return false;
   }

{代码}

相关文章：