텍스트 파일에 javascript 변수 값을 저장하는 방법은 무엇입니까?

Question

캔버스에 이미지의 픽셀 값을 저장하려고합니다. 클릭 한 위치의 픽셀 값을 추출하는 코드를 작성했습니다 (이미지에서). 나는 r, g, b의 값을 파이썬 플라스크에서 수행되는 서버 측 처리에서 사용하기 위해 텍스트 파일에 저장하려고합니다.

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를 아약스로 전송 (submit 버튼) 및 텍스트 파일로 저장합니다.