canvas imageDraw（）不起作用

Question

我想使用toDataURL（）获取图像数据。但我的Imagedraw（）方法无法正常工作。

    var video = document.getElementById('media-video');
            var videoCurrentTime = document.getElementById('media-video').currentTime;
            var canvasWidth = $('video').width();
            var canvasHeight = $('video').height();
            var c = $('body').append($('<canvas>',{id: 'myCanvas', width:canvasWidth, height:canvasHeight}));

    var ctx;

    $(document).ready(function() {
        c = document.getElementById('myCanvas');                        
        ctx = c.getContext("2d");            
    });
    c.onload=function(){
        ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight);
    }  
    imageData = c.toDataURL("image/jpeg",1.0);

    window.open(imageData, "toDataURL() image", "width=600, height=200");
}

我可以在imageData中看到一个空白画布。

Answer 1

Becouse c.onload=是非法的。在onload之后你最多得到dataData。

c.onload=function(){
    ctx.drawImage(video, 0, 0,canvasWidth , canvasHeight);
    imageData = this.toDataURL("image/jpeg",1.0);
  window.open(imageData, "toDataURL() image", "width=600, height=200");
}