putImageData/Canvas - 如何在这里转储像素数组？

Question

我之前使用过getImageData之后，如何重新绘制像素数组？我认为是有意义的方式给我的错误：指定无效或非法字符串“代码：” 12

function makeImage(canvasId, background, object) { 

    var canvas = document.getElementById(canvasId); 
    var ctx = canvas.getContext('2d'); 
    var backgroundData = null; 
    var objectData = null; 

    //Get image Data 
    function getDataFromImage(img) { 
     canvas.width = img.width; 
     canvas.height = img.height; 
     ctx.clearRect(0, 0, img.width, img.height); 
     ctx.drawImage(img, 0 ,0); 
     return ctx.getImageData(0, 0, img.width, img.height); 
    } 

    //Load image 
    function loadImage(src, callback) { 
     var img = document.createElement('img'); 
     img.onload = callback; 
     img.src = src; 
     return img; 
    } 

    //Get Background Image Data 
    var backgroundImg = loadImage(background, function() { 
     backgroundData = getDataFromImage(backgroundImg); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     }); 

    //Get Object Image Data 
    var objectImg = loadImage(object, function() { 
     objectData = getDataFromImage(objectImg); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     }); 

    main(); 

    function main() { 
     ctx.putImageData(backgroundData, 0, 0); //Try to redraw the background?? 
    } 
}; 

Answer 1

我想你可能需要把

main() 

调用内部正在填充backgroundData的loadImage调用。可能是图像加载之前调用main。

var backgroundImg = loadImage(background, function() { 
    backgroundData = getDataFromImage(backgroundImg); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    main(); 
});