使用excanvas在画布上绘制图像

时间:2012-11-23 11:39:16

标签: javascript jquery html5-canvas excanvas

我正在使用excanvas.js库来支持IE(9以下)浏览器中的画布功能。我目前面临的问题是excanvas期望image作为drawImage()方法的第一个参数。我发现它不会支持另一个画布或视频作为第一个参数。实现此功能的解决方法是什么? 我的代码是这样的。

    var canvas1 = document.getElementById("canvas1"); // Get the first canvas Element
    var canvas2 = document.getElementById("canvas2"); // Get the second canvas element
    if (typeof G_vmlCanvasManager != 'undefined') {
        canvas1 = G_vmlCanvasManager.initElement(canvas1); // Initialise with excanvas
        canvas2 = G_vmlCanvasManager.initElement(canvas2);
    }    

    if (canvas1.getContext) {
        var ctx1 = canvas1.getContext("2d");
        var ctx2 = canvas2.getContext("2d");
        var img = new Image();
        img.onload = function () {
            ctx1.drawImage(this, 0, 0, 200, 200); // Draw the image on first canvas
            ctx2.drawImage(canvas1, 0, 0, 200, 200); // Draw the image on to the second canvas using the first canvas
        }
        img.src = "image1.jpg";        
    }

它不适用于Ie8及以下版本的浏览器。怎么能解决这个问题呢?

1 个答案:

答案 0 :(得分:0)

我会尝试这样的事情:

function canvasToImage( canvas ) {
    var img = new Image();
    img.src = canvas.toDataURL();
    return img;
}