提交时图像出现然后消失答案

【问题标题】：Image appears then disappears when submitted提交时图像出现然后消失
【发布时间】：2014-11-25 18:03:30
【问题描述】：

我有一个接受图像 url 的输入框，当单击提交按钮时，url 由 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 函数中的两个警报均按预期显示，但图像未保留在画布/图像对象中。

【问题讨论】：

标签： javascript html image

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以阻止表单的提交操作或更改输入类型按钮并将 submitImage 函数附加到按钮的单击事件并从表单提交中删除 submitImage

{代码}

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

{代码}

【讨论】：