Question

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

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

halfway canvas image

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（）中创建的画布的大小为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 pixeldata用完整的图像而不是一半图像填充html画布？

1 个答案: