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请求。您必须设置服务器才能处理此请求。

如果您尝试保留某些客户端数据，可以使用set a cookie，或使用localStorage。

Answer 2

有几个错误，应该是ccolor[n]而不是ccolor.data[n]，window.addEventListener(...)而不是window.addEvent(...)。此外，您必须在"load"监听器功能中包含所有代码，并且document.getElementById('imageLoader').value = r + ',' + g + ',' + b;无法正常工作，因为imageLoader是input类型{{ 1}}元素。

就像我在评论中说的那样，您无法使用file创建/写入文件，您需要一个可以处理HTTP请求的服务器端组件来执行此操作。

以下是您的代码的工作版本：

ajax

如何使用ajax将变量写入文本文件？

2 个答案: