在多个 js 脚本之间共享相同的变量 - 一个具有 .ready 函数，另一个没有

Question

我有 2 个 js 脚本：

 <script type="text/javascript">

 function capture(){
var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
var img = canvas.toDataURL("image/png");
alert(img);
}
</script>
<script type="text/javascript"> 
 $(document).ready(function() { 

 $(".post").click(function() { alert(img);
 var level = document.getElementById('level');
 var language = document.getElementById('language');
 var textac = document.getElementById('textac');
 var decribac = document.getElementById('decribac');
 $.ajax({
 type: "POST",
url: "love.php",

data: {img: img, language: language, level: level, decribac:decribac, textac: textac },
  cache: false,
  success: function(data){

   }});
     window.location.replace("love.php");

   });
   });
   </script>

他们所做的是第一个点击“捕获”制作视频缩略图并将其放入画布并保存 var img。而另一个点击另一个按钮“发布”则通过 ajax 发布所有内容，包括图像 base64 编码字符串。我的问题是，当我尝试单击“发布”控制台注销时

-  404 Uncaught ReferenceError: img is not defined

而且我不知道为什么好像我在第一个脚本中提醒它它会正确地提醒但第二个不知道它。如果我将捕获函数放在

下

   $(document).ready(function(){..});

然后它确实工作并且控制台说 - 捕获功能未定义。那也很奇怪。如果我不放第二个按钮处理程序，它不会在点击时做任何事情。所以我需要把它们放在自己的脚本中——一个有 .ready 函数，一个没有。现在我无法将 img var 发送到第二个脚本以通过 ajax 将其发送到 php 脚本。帮助。

Answer 1

您在函数中定义该变量：

function capture(){
    //...
    var img = canvas.toDataURL("image/png");
    //...
}

所以它只存在于该函数的范围内。如果需要全局，则全局定义：

var img;

function capture(){
    //...
    img = canvas.toDataURL("image/png");
    //...
}

这会将它附加到 window 对象，在整个窗口范围内的其他代码可以访问它。