我已经借用了这段代码来尝试满足我的需求http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/，因为它执行的是最低限度的任务，即逐像素渲染图像。 （我相信）。
我想做的是创建每个像素的RGB信息的数组，并以纯文本显示信息。
为了测试，我尝试使用5x5像素的小图像进行此操作，也将其保存在我用chrome打开的.html文件中。
轻描淡写的JS
<script>
function drawImage(imageObj) {
var codepanel = document.getElementById('code');
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageX = 69;
var imageY = 50;
var imageWidth = imageObj.width;
var imageHeight = imageObj.height;
var pixels = new Array(); //my addition
var pixel = 0; //my addition
context.drawImage(imageObj, imageX, imageY);
var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
var data = imageData.data;
// iterate over all pixels
for(var i = 0, n = data.length; i < n; i += 4) {
var red = data[i];
var green = data[i + 1];
var blue = data[i + 2];
var alpha = data[i + 3];
pixels[pixel] = red + " " + green + " " + blue + " "; //my addition
pixel++; //my addition
}
codepanel.innerHTML = pixels.join(); //my addition
var x = 20;
var y = 20;
var red = data[((imageWidth * y) + x) * 4];
var green = data[((imageWidth * y) + x) * 4 + 1];
var blue = data[((imageWidth * y) + x) * 4 + 2];
var alpha = data[((imageWidth * y) + x) * 4 + 3];
for(var y = 0; y < imageHeight; y++) {
for(var x = 0; x < imageWidth; x++) {
var red = data[((imageWidth * y) + x) * 4];
var green = data[((imageWidth * y) + x) * 4 + 1];
var blue = data[((imageWidth * y) + x) * 4 + 2];
var alpha = data[((imageWidth * y) + x) * 4 + 3];
}
}
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'pallet.gif';
</script>
的HTML
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<canvas id="myCanvas" width="100%" height="100%"></canvas>
<div id="code"> </div>
</body>
</html>
这意味着您绘制到画布上的图像来自与页面不同的来源（如果使用本地页面进行测试，file：//也被认为是不同的来源）。
解决此问题的最简单方法是：
要请求跨域，请在设置前执行以下操作src：
imageObj.crossOrigin = '';
imageObj.src = 'pallet.gif';
如果外部服务器不接受，则会失败。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句