Javascript 通过createImageBitmap运行后getImageData不相同

我有一个功能，下载图像，并保存图像数据。根据用户的偏好，它可以通过两种方式之一保存图像数据-作为或作为。我正在使用图像加载功能等待图像加载后再运行保存功能：

函数loadImage（src）{
返回新承诺（（解决、拒绝）=>{
const img=新图像（）；
img.crossOrigin='*'；
addEventListener（'load'，（）=>resolve（img））；
img.src=src；
});
}

保存图像数据的功能如下：

异步函数fetchAndSaveImage（优先级）{
const imageUrl=`some_url`；
//创建一个画布，这样我就可以将图像数据写入画布，然后在画布上调用getImageData
var transferCanvas=document.createElement（'canvas'）；
transferCanvas.width=transferCanvas.height=256；
var c=transferCanvas.getContext（'2d'）；
等待loadImage（图像URL）。然后（（图像）=>{
如果（优先级==‘速度’）{
c、 drawImage（图像，0，0，256，256）；
var pixelData=c.getImageData（0,0,256,256）；
保存图像（图像名称、像素数据）；
}否则{
createImageBitmap（图像，0，0，256，256）
。然后（（ibm）=>saveImage（imageName，ibm））；
}
});
}

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

优先级

函数getPixelData（savedImageData、xyPosition、priority）{ 让RGBA； 如果（优先级==‘速度’）{ //图像数据形式的平铺数据， //只需从uint8clampedaray中的位置获取像素即可 RGBA=getRGBfromImgData（savedImageData，xyPosition.x，xyPosition.y）； }否则{ //图像位图形式的平铺数据， //需要为坐标调用.getImageData 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 ).数据； RGBA={ R:pixelData[0]， G:pixelData[1]， B:pixelData[2]， 答：pixelData[3]， }; } 返回RGBA； } 当

优先级为速度时，一切都完全按照预期工作。图像被加载，然后写入画布，获取图像数据，并保存为
Uint8ClampedArray
。但是，当使用
优先级='storage'
时，我得到的结果不一致。有时，它会像预期的那样工作，我会得到良好的RGBA值。但是很多时候，对于某些图像URL，我得到的RGBA值都是0（对于相同的图像URL，我得到的是
优先级='speed'
的良好RGBA值）

我还尝试先做一个
c.drawImage（image，0，0，256，256）
，然后
createImageBitmap（c.canvas）
，只是为了确保图像数据在那里。没有变化。我还尝试过玩
ImageBitmapRenderingContext
，但我不能
drawImage
，也不能
getImageData

将我的图像转换为
ImageBitmap
，然后再转换回
uint8clampedaray
，有时我的值会变成0，这是怎么回事？是否有更好的方法将RGBA图像数据存储在内存中，从而仍然允许快速检索值

感谢阅读。
您没有设置输出画布宽度和heoht，因此如果坐标大于300150，您将使用不存在的像素。另外，你能不能也给我看一下
saveImage
。这解决了问题。谢谢大家!
saveImage
非常简单：
function saveImage（imageName，pixelData）=cacheObject[imageName]=pixelData
，其中
cacheObject
实际上只是一个临时对象。尽管此功能也可由包的用户自定义。再次感谢你！如果你做一个正式的回答，我可以这样做，并给你一个很好的投票，先生。