Javascript 如何在html5画布中从另一个ArrayBuffer正确分配ArrayBuffer

我有一个要求，我必须采取一个图像，并渲染到隐藏的画布。然后读取其图像数据，然后使用动画慢慢渲染到另一个画布

我已经这样做了：

var buffer = null;
var newBuffer = null;
var image = new Image();
image.src = "images/test.jpg"
image.onload = function() {
    render(image);
}
function render(image) {
    var c = document.getElementById("c");
    c.width = window.innerWidth * 0.90;
    c.height = window.innerHeight * 0.90;
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth * 0.90;
    canvas.height = window.innerHeight * 0.90;        
    var context = c.getContext('2d');
    context.drawImage(image, 0, 0);
    var imageData = context.getImageData(0, 0, image.width, image.height);
    buffer = imageData.data.buffer; // ArrayBuffer
    newBuffer = new ArrayBuffer(buffer.byteLength);
    var dataTypedArray = new Uint8Array(newBuffer);
    var actualData = new Uint8Array(buffer);
    var j = 0;
    for (var i = 0; i <= image.width; i++) {
        for (j = 0; j <= image.height*4; j++) {
            dataTypedArray[i + image.width * j] = actualData[i + image.width * j];
        }
        renderImgSlowly(canvas, image, dataTypedArray);
    }
}
function renderImgSlowly (canvas, image, dataTypedArray)  {
    //some animation to render the image slowly line by line
}

var buffer=null；
var newBuffer=null；
var image=新图像（）；
image.src=“images/test.jpg”
image.onload=函数（）{
渲染（图像）；
}
函数渲染（图像）{
var c=document.getElementById（“c”）；
c、 宽度=window.innerWidth*0.90；
c、 高度=窗内高度*0.90；
var canvas=document.getElementById（“canvas”）；
canvas.width=window.innerWidth*0.90；
canvas.height=window.innerHeight*0.90；
var context=c.getContext（'2d'）；
drawImage（image，0,0）；
var imageData=context.getImageData（0，0，image.width，image.height）；
buffer=imageData.data.buffer；//ArrayBuffer
newBuffer=新阵列buffer（缓冲区长度）；
var dataTypedArray=新的Uint8Array（NEBUFFER）；
var actualData=新的Uint8Array（缓冲区）；
var j=0；
对于（var i=0；i）来说，如果您能够准确地描述这种时尚有多奇怪，那会有帮助。发生了什么？您期望发生什么？--另外，请注意您对
renderImgSlowly（）的调用
位于外部
for
循环的内部，这意味着您将对图像中的每一行像素执行一次操作。这真的是它应该如何工作的吗？Rq:drawImage，在其9参数风格中，非常适合逐行渲染：更简单、更快。@Pointy我想逐行渲染它们，因此我使用了类似于th的for循环是。@gamealchest我不明白，你能解释一下吗假设画布和图像大小相同，绘制图像的第I行是用：
dstContext.drawImage（srcImage，0，I，imageWidth，1，0，I，imageWidth，1）