Как мне заполнить мой HTML-холст полным изображением, а не только половиной изображения, используя пиксельные данные rgba? - PullRequest
Новая
       10

Как мне заполнить мой HTML-холст полным изображением, а не только половиной изображения, используя пиксельные данные rgba?

0 голосов
/ 29 апреля 2019

Я рисую изображение на холсте, используя массив значений пикселей rgba, полученных из изображения и нарисованных с использованием ctx.fillrect (x, y, 1,1) на пиксель в cnavas, но оно только заполняет холст с половиной изображения сверху вниз.

Нарисованное изображение должно заполнить весь холст всем изображением.

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

1 Ответ

0 голосов
/ 30 апреля 2019

Проблема в том, что холст, который вы создаете внутри 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;
}
...