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

Question

我已經編寫了代碼在畫布上繪制用戶輸入圖像。 之后，我提取要單擊的位置的像素值，並嘗試使用ajax將其寫入文本文件。 但是我的onclick和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>

Answer 1

jQuery的.ajax（）方法執行一個異步HTTP請求。 您必須設置服務器以處理此請求。

如果您要保留某些客戶端數據，則可以設置cookie或使用localStorage 。

Answer 2

有一些錯誤，例如，應該是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>

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

問題描述

2 個解決方案

解決方案1
0 2016-06-24 06:38:50

解決方案2
0 2016-06-24 06:48:41

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

問題描述

2 個解決方案

解決方案1 0 2016-06-24 06:38:50

解決方案2 0 2016-06-24 06:48:41

解決方案1
0 2016-06-24 06:38:50

解決方案2
0 2016-06-24 06:48:41