如何使用ajax將變量寫入文本文件？

我已經編寫了一個代碼在畫布上繪製用戶輸入圖像。之後，我提取被點擊的位置的像素值，並試圖使用ajax將它們寫入文本文件。但是，我的onclick和ajax功能不起作用。請告訴我我的代碼有什麼問題。如何使用ajax將變量寫入文本文件？

<html> 
<head> 
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script> 
<script type="text/javascript"> 

window.addEvent('load', function() { 
var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
var c = document.getElementById('myCanvas'); 
var ctx = c.getContext('2d'); 
function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      c.width = img.width; 
      c.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
    } 
}); 
var canvas = document.getElementById('myCanvas'); 

canvas.onclick = function(e){ 
var ctx = canvas.getContext('2d'); 
var x = e.x; 
var y = e.y; 
var ccolor = ctx.getImageData(x,y,1,1).data; 
var r = ccolor.data[0]; 
var g = ccolor.data[1]; 
var b = ccolor.data[2]; 
document.getElementById('imageLoader').value = r + ',' + g + ',' + b; 
var rgb = document.getElementById('imageLoader').value; 
$.ajax({ 
    type: "POST", 
    url: 'ajax.txt', 
    data: rgb, 
    success:function(data){ 
     console.log(data); 
     } 
    }); 
} 

</script> 
</head> 

<body> 
<div style="background:#ffffff; width:100%; padding:20px; "> 
<label>Image File:</label><br/> 
<input type="file" id="imageLoader" name="imageLoader"/> 
<input type="submit"/> 
</div> 

<canvas id="myCanvas" ></canvas> 
</body> 
</html>

來源

2016-06-24 Aishwarya Bhave

'網址：「ajax.txt''好像你試圖使用'ajax'這是不寫入一個文本文件可能的話，你將不得不創建一個服務器端組件來處理POST請求來完成文件寫入。 – Titus

並且是我的canvas.onclick函數是否正確？ –

它似乎是。 – Titus

jQuery的.ajax()方法執行異步HTTP請求。您必須設置您的服務器來處理此請求。

如果您試圖保留某些客戶端數據，則可以使用set a cookie或使用localStorage。

來源

2016-06-24 06:38:50 mrlew

有幾個錯誤，例如它應該是ccolor[n]而不是ccolor.data[n],window.addEventListener(...)而不是window.addEvent(...)。此外，您必須包含"load"聽衆功能中的所有代碼，document.getElementById('imageLoader').value = r + ',' + g + ',' + b;將不起作用，因爲imageLoader是input類型file元素。

就像我在我的評論中所說的，你不能使用ajax創建/寫入文件，你需要一個服務器端組件來處理HTTP請求。

這裏的工作版本你代碼：

<html> 
<head> 
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script> 
<script type="text/javascript"> 

window.addEventListener('load', function() { 
var imageLoader = document.getElementById('imageLoader'); 
    imageLoader.addEventListener('change', handleImage, false); 
var c = document.getElementById('myCanvas'); 
var ctx = c.getContext('2d'); 
function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      c.width = img.width; 
      c.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
    } 

var canvas = document.getElementById('myCanvas'); 

canvas.onclick = function(e){ 
var ctx = canvas.getContext('2d'); 
var x = e.x; 
var y = e.y; 
var ccolor = ctx.getImageData(x,y,1,1).data; 
var r = ccolor[0]; 
var g = ccolor[1]; 
var b = ccolor[2]; 
var rgb = r + ',' + g + ',' + b; 
console.log(rgb); 
$.ajax({ 
    type: "POST", 
    url: 'serverSideComponent', 
    data: rgb, 
    success:function(data){ 
     console.log(data); 
     } 
    }); 
} 
}); 
</script> 
</head> 

<body> 
<div style="background:#ffffff; width:100%; padding:20px; "> 
<label>Image File:</label><br/> 
<input type="file" id="imageLoader" name="imageLoader"/> 
<input type="submit"/> 
</div> 

<canvas id="myCanvas" ></canvas> 
</body> 
</html>

來源

2016-06-24 06:48:41 Titus

rgb值在控制檯上仍然不可見，點擊 –

@AishwaryaBhave我剛剛在我的系統上運行它，它的工作原理，我做的唯一不同的是排除此腳本'http：// fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js'幷包含JQuery庫（對於ajax調用需要）。 – Titus

實際上它正在工作，但它在控制檯顯示context.getImageData不是一個有限的浮點值 –

如何使用ajax將變量寫入文本文件？

回答

相關問題