如何使用 rgba 像素数据填充我的 html 画布，而不是只填充一半图像？答案

【问题标题】：How do I fill my html canvas up with a complete image instead of only half an image using rgba pixeldata?如何使用 rgba 像素数据填充我的 html 画布，而不是只填充一半图像？
【发布时间】：2019-09-18 09:34:17
【问题描述】：

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

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

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);
}

【问题讨论】：

你的run()函数和优化数据在哪里？
我已经用更多上下文代码更新了我的问题

标签： javascript html canvas drawing

【解决方案1】：

问题是您在 getImageData() 中创建的画布大小为 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;
}

【讨论】：

谢谢模糊，这是正确答案，非常感谢您的帮助！