我正在尝试在 Canvas 上保存图像的像素值。我编写了一段代码来提取单击位置的像素值(在图像上)。我想将 r、g、b 的值保存到一个文本文件中,以便在服务器端处理中使用它们,这是在 python Flask 中完成的。
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>
最佳答案
您可以修改您的函数,例如:
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;
}
然后使用 Ajax o 使用通常的表单(提交按钮)发送并保存在文本文件中。
关于javascript - 如何将 JavaScript 变量值保存在文本文件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37988354/