通过createImageBitmap运行后，getImageData不相同

问题描述

我有一个下载图像并保存图像数据的功能。根据用户的喜好，它可以通过以下两种方式之一保存图像数据：另存为ImageData Uint8ClampedArray或ImageBitmap。我正在使用图片加载功能来等待图片加载完毕，然后再运行保存功能：

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,256,256);
      var pixelData = c.getImageData(0,256);
      saveImage(imageName,pixelData);
    } else {
      createImageBitmap(image,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);
    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，我得到的priority = 'speed'的RGBA值好。）

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

将图像转换为ImageBitmap，然后又返回到Uint8ClampedArray时，我的值有时最终为0，这是怎么回事？是否有更好的方法将RGBA图像数据存储在内存中，仍然可以快速检索值？

感谢阅读。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）