0

我有一个下载图像并保存图像数据的功能。根据用户的喜好，它可以以两种方式之一保存图像数据 - 作为，或作为. 我正在使用图像加载功能等到图像加载完毕，然后再运行我的保存功能：ImageData Uint8ClampedArrayImageBitmap

function loadImage(src) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = '*';
        img.addEventListener('load', () => resolve(img));
        img.src = src;
    });
}

保存图像数据的函数是这样的：

async function fetchAndSaveImage(priority) {
  const imageUrl = `some_url`;

  // Create a canvas, so I can write the image data to it and then call getImageData on it
  var transferCanvas = document.createElement('canvas');
  transferCanvas.width = transferCanvas.height = 256;
  var c = transferCanvas.getContext('2d');

  await loadImage(imageUrl).then((image) => {
    if (priority === 'speed') {
      c.drawImage(image, 0, 0, 256, 256);
      var pixelData = c.getImageData(0, 0, 256, 256);
      saveImage(imageName, pixelData);
    } else {
      createImageBitmap(image, 0, 0, 256, 256)
        .then((ibm) => saveImage(imageName, ibm));
    }
  });

}

为了从我保存的图像中提取有意义的像素数据，我还有另一个函数，它也考虑了priority

function getPixelData(savedImageData, xyPosition, priority) {

  let RGBA;

  if (priority === 'speed') {

    // Tile data in form of ImageData,
    // Simply need to get pixels from position in Uint8ClampedArray 
    RGBA = getRGBfromImgData(savedImageData, xyPosition.x, xyPosition.y);

  } else {
  
    // Tile data in form of ImageBitMap, 
    // need to call .getImageData for coordinate
    var canvas = document.createElement('canvas');
    var c = canvas.getContext('2d');
    c.drawImage(savedImageData, 0, 0);
    var pixelData = c.getImageData( 
      xyPosition.x, xyPosition.y, 1, 1
    ).data;

    RGBA = {
      R: pixelData[0],
      G: pixelData[1],
      B: pixelData[2],
      A: pixelData[3],
    };
  }

  return RGBA;
}

priority当速度正常时，一切都按预期工作。加载图像，然后将其写入画布，获取其图像数据并保存为Uint8ClampedArray. 但是，在使用时priority = 'storage'，我得到的结果不一致。有时，它按预期工作，我得到了良好的 RGBA 值。但是很多时候，对于某些图像 url，我得到的 RGBA 值全为 0（当对于相同的图像 url 时，我得到很好的 RGBA 值priority = 'speed'。）

我也尝试先做 ac.drawImage(image, 0, 0, 256, 256)然后createImageBitmap(c.canvas)，只是为了确保图像数据在那里。没变。我也试过玩ImageBitmapRenderingContext，但我不能，我也drawImage不能getImageData。

将我的图像转换为 anImageBitmap然后再转换为我的Uint8ClampedArray值有时最终为 0 时出了什么问题？是否有更好的方法将 RGBA 图像数据存储在内存中，仍然允许快速检索值？

谢谢阅读。

4

0 回答 0