如何使用 rgba 像素数据用完整图像填充 html canvas，而不是只填充半个图像？

Question

我正在使用从图像中获取的 rgba 像素值数组将图像绘制到我的 canvas 中，并使用 cnavas 上的每个像素 ctx.fillrect(x,y,1,1) 进行绘制, 但它只用图像从上到下的一半填充 canvas。

绘制的图像需要用整个图像填满整个canvas。

index.html

<!doctype html>
<html>
  <head>
      <script src='app.js'></script>
  </head>
  <body>
      <img src="coins.png" id="myImage">
      <br>
      <button type="button" onclick="run();">Run</button>
      <br>
      <div id='canvasContainer' style='border:1px solid #333;'></div>
  </body>
</html>

app.js

// Run Function...
function run() {
  // Step 1: Get Image Data (width, height, pixels) ------------------------ Done.
  var data = getImageData();

  // Step 2: Optimize Data
  var optimizedData = optimizeData(data);

  // Step 3: Let Client Download Optimized Data and Generate Canvas Object
  generateCanvasObject(optimizedData);
}

// Returns a data object containing width, height and a pixel data array (r,g,b,a)
function getImageData() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = document.getElementById('myImage');

  ctx.drawImage(img,0,0);
  var imgData = ctx.getImageData(0,0,img.naturalWidth,img.naturalHeight);

  var data = {};
  data.width = imgData.width;
  data.height = imgData.height;
  data.pixelData = imgData.data;

  return data;
}

// Return optimized data from unoptimized data object
function optimizeData(data) {
  // Needs work...

  return data;
}

// Returns canvas object from optimized data
function generateCanvasObject(optimizedData) {
  // Optimized Data
  var pixelData = optimizedData.pixelData;

  // Canvas Object
  var canvas = document.createElement('canvas');
  canvas.width = optimizedData.width;
  canvas.height = optimizedData.height;
  var ctx = canvas.getContext('2d');

  // Draw to Context...
  var i = 0;
  for (var y=0; y < optimizedData.height; y++) {
    for (var x=0; x < optimizedData.width; x++) {
      var r = pixelData[i];
      var g = pixelData[i+1];
      var b = pixelData[i+2];
      var a = pixelData[i+3];

      ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a/255) + ")";
      ctx.fillRect(x,y,1,1);

      i+=4
    }
  }
  document.getElementById('canvasContainer').appendChild(canvas);
}

Answer 1

问题是您在 getImageData() 中创建的 canvas 大小为 300x150 像素 - 这是默认值。它的大小必须与您要绘制的图像的大小相匹配。

function getImageData() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = document.getElementById('myImage');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight);
  var data = {};
  data.width = imgData.width;
  data.height = imgData.height;
  data.pixelData = imgData.data;

  return data;
}

如何使用 rgba 像素数据用完整图像填充 html canvas，而不是只填充半个图像？

How do I fill my html canvas up with a complete image instead of only half an image using rgba pixeldata?

html

javascript

drawing

canvas