共有同じ変数 - 1は.ready機能を有し、他のは、私は2つのJSスクリプトを持ってい

Question

ん：

<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を保存します。もう1つのボタンをクリックすると、 'post'は画像base64でエンコードされた文字列を含むajaxですべてをポストします。私の問題は、私はクリックしようとすると、「ポスト」コンソールが

- 404 Uncaught ReferenceError: img is not defined 

をloggsそして、私は私が最初のスクリプトでそれを警告する場合、それはcorrectelly警告が、2番目ますように、1つのdoesntがそれを知っている理由を知らないということです。私は

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

下のキャプチャfinctionを入れた場合と、それは仕事をdoenstとコンソールは述べています - キャプチャ機能が定義されていません。それも変だ。 2番目のボタンハンドラを置かないと、クリックしたときに何もしません。だから私はそれらを自分のスクリプトに入れる必要がありました - 一つは.readyの機能を持ち、もう一つはありません。今私はphpスクリプトにajax経由で送信するために2番目のスクリプトにimg varを取得することはできません。助けて。

Answer 1

あなたが関数内でその変数を定義します。

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

だからそれだけでその関数の範囲内に存在します。それはグローバルにする必要がある場合は、グローバルに定義：

var img; 

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

を、それが全体的なウィンドウの範囲内の他のコードによってによってアクセスできるwindowオブジェクトにアタッチだろう。