Question

我已经借用这段代码来尝试满足我的需求http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/，因为它完成了它的最小任务，逐像素呈现图像（我相信）。

我要做的是创建每个像素的RGB信息数组，并以纯文本显示信息。

为了测试我尝试使用小图像，5x5像素，我也在.html文件中使用chrome打开了这个。

轻松改编的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>

Answer 1

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

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

如果是本地，请安装轻量级服务器以关闭（localhost）页面，例如Mongoose。
如果在线，请将图像移至您自己的服务器或尝试请求跨域使用。对于后者，需要配置外部服务器以允许此操作。

要请求跨源，请在设置src之前执行以下：

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

外部服务器不接受这会失败。

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

1 个答案: