Javascript JS生成图像中每个像素的RGB

我借用了这段代码来满足我的需要，因为它完成了一个像素一个像素地渲染图像的最小任务（我相信）

我要做的是创建一个包含每个像素的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>

函数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（）；//我的添加
var pixel=0；//我的加法
上下文.drawImage（imageObj、imageX、imageY）；
var imageData=context.getImageData（imageX、imageY、imageWidth、imageHeight）；
var数据=imageData.data；
//迭代所有像素
对于（变量i=0，n=data.length；i

HTML

---

这意味着您在画布上绘制的图像来自与页面不同的来源（如果您使用本地页面进行测试，则文件：//也被视为不同的来源）

解决此问题的最简单方法是：

• 如果是本地的，安装一个轻量级服务器来加载页面（localhost），例如
• 如果联机，请将图像移动到您自己的服务器或尝试请求跨源使用。对于后者，需要将外部服务器配置为允许此操作

要请求交叉原点，请在设置

src

之前执行以下操作：

imageObj.crossOrigin = '';
imageObj.src = 'pallet.gif';

---

如果外部服务器不接受，此操作将失败。

chrome控制台错误显示“CanvasRenderingContext2D”：画布已被跨源数据污染“您有什么问题？代码是否未按预期工作？你有什么错误？不能删除像素增量，它与像素数据数组无关？@Bergi oops，你说得对。我将其与

I

var混合。。很糟糕。谢谢Hanks Ken，我刚刚在node.js服务器上运行了脚本，它运行得非常好！

imageObj.crossOrigin = '';
imageObj.src = 'pallet.gif';