Нанесение изображения на холст с помощью excanvas
Я использую библиотеку excanvas.js для поддержки функций холста в браузерах IE(ниже 9). Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что excanvas ожидает изображение в качестве первого аргумента метода 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 ответ
Я бы попробовал что-то вроде этого:
function canvasToImage( canvas ) {
var img = new Image();
img.src = canvas.toDataURL();
return img;
}