JavaScriptファイルの変数値をテキストファイルに保存するには？

Question

キャンバスに画像のピクセル値を保存しようとしています。私はクリックされた場所のピクセル値を抽出するためのコードを書いています（画像上）。私はr、g、bの値をテキストファイルに保存して、pythonフラスコで行われるサーバー側の処理でそれらを使用したいと思います。

var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
var canvas = document.getElementById('imageCanvas'); 
var ctx = canvas.getContext('2d'); 

function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      canvas.width = img.width; 
      canvas.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 

canvas.onclick = function(e) { 
    var x = e.pageX; 
    var y = e.pageY; 
    var canvasColor = context.getImageData(x, y, 1,1); // rgba e [0,255] 
    var pixels = canvasColor.data; 
    var r = pixels[0]; 
    var g = pixels[1]; 
    var b = pixels[2]; 
    // i want to save r,g,b values in a text file for usage in the flask backend 
} 

<script type = "text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script> 
<label>Image File:</label><br/> 
<input type="file" id="imageLoader" name="imageLoader"/> 
<canvas id="imageCanvas"></canvas> 

Answer 1

あなたはあなたのような機能を変更することができます。

canvas.onclick = function(e) { 
    var x = e.pageX; 
    var y = e.pageY; 
    var canvasColor = context.getImageData(x, y, 1,1); // rgba e [0,255] 
    var pixels = canvasColor.data; 
    var r = pixels[0]; 
    var g = pixels[1]; 
    var b = pixels[2]; 
    // i want to save r,g,b values in a text file for usage in the flask backend 

    //asign rgb values to the input 
    document.getElementById('imageLoader').value = r + ',' + g + ',' + b; 
} 

そしていつもの形でoをアヤックスに送信（送信ボタン）とテキストファイルに保存します。