Cảm ơn tất cả các bạn đã trả lời. Tôi cần phải cụ thể hơn với câu hỏi của mình. Tôi đã xem xét một số ví dụ, nhưng đây là một ví dụ từ các trường W3 (cảm ơn bạn @Pointy vì đã chỉ ra rằng đây không phải là nguồn mà một người nên dựa vào - không có ý định chơi chữ).Làm cách nào để bạn có được một mảng dữ liệu pixel từ một hình ảnh?
http://www.w3schools.com/tags/canvas_getimagedata.asp
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
document.getElementById("scream").onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0, 0, c.width, c.height);
// invert colors
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i + 1] = 255 - imgData.data[i + 1];
imgData.data[i + 2] = 255 - imgData.data[i + 2];
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
};
</script>
</body>
</html>
Trước hết tôi là một chút nhầm lẫn từ ví dụ trên trang web W3 Schools cho thấy màu sắc điểm ảnh của hình ảnh bị đảo ngược, nhưng khi tôi copy mã vào Sublime Văn bản 2, tiết kiệm và mở nó trong Chrome, màu pixel của hình ảnh không bị đảo ngược và hình ảnh chỉ xuất hiện chính xác như cũ bên cạnh nó.
Câu hỏi chính của tôi là làm cách nào để thêm một dòng vào mã này để hiển thị toàn bộ mảng dữ liệu pixel cho hình ảnh?
tôi đã thêm một div trống với một id của "dữ liệu" bên dưới hình ảnh và thêm vào đoạn mã sau nhưng toàn bộ mảng dữ liệu điểm ảnh không xuất hiện:
document.getElementById("data").innerHTML=imgData.data;
Tôi cũng đã cố gắng để xem ít nhất là chiều dài của mảng dữ liệu pixel bằng cách thêm vào sau, nhưng nó đã không làm việc:
document.getElementById("data").innerHTML=imgData.data.length;
tôi đã xem xét một vài ví dụ về thao tác dữ liệu hình ảnh điểm ảnh từ nhiều nguồn khác nhau và cố gắng nhiều lần để có được toàn bộ mảng dữ liệu pixel nhưng không thể.
Tôi muốn xem mảng dữ liệu pixel để nhận biết các ký tự hoặc hình ảnh trong hình ảnh và bắt đầu thấy các mẫu có thể xuất hiện từ những thứ cụ thể trong hình ảnh.
Cảm ơn bạn rất nhiều vì đã giúp đỡ bạn.
bạn có thể muốn xem https://github.com/Ralt/xpmjs – technosaurus
Nếu bạn đã biết về 'getImageData()', sự nhầm lẫn chính xác là gì? – Pointy
@Pointy tôi đoán sự nhầm lẫn là do 'Tôi đã nhìn vào trường W3' – MikeM