Question

我有一个接受图像网址的输入框，当点击提交按钮时，网址是通过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函数中的两个警报都按预期显示，但图像不会保留在画布/图像对象中。

Answer 1

您提交的表单涉及重新加载页面，因此我猜它会短暂显示图像，然后重新加载，清空画布。

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

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

Answer 2

您可以阻止表单的提交操作或更改输入类型按钮并将submitImage函数附加到按钮的click事件，并从表单提交中删除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;
   }

{代码}

提交后，图像会消失

2 个答案: