Альтернатива Internet Explorer toDataURL()?
-
10-07-2019 - |
Вопрос
Итак, мне нужно сохранить данные изображения, нарисованные на <canvas>
элемент.И есть метод toDataURL(), который работает в большинстве современных браузеров.
За исключением...вы уже догадались...Internet Explorer.
Я поискал в Интернете, но везде люди говорят, что я должен использовать SVG / VML для сохранения данных, но они никогда не упоминают, как это сделать.У меня нет никакого опыта работы с SVG / VML в IE, так как же мне сохранить изображение, нарисованное в элементе canvas в Internet Explorer?Есть ли у кого-нибудь опыт?
На данный момент мне пришлось дублировать код чертежа как на клиенте, так и на сервере, что начинает усложняться.Так что, если есть способ, которым я мог бы извлечь изображение, нарисованное в теге canvas, на стороне клиента (или сервера), это, безусловно, помогло бы.
Спасибо!
Решение
Возможно, вы сможете получить VML и то же самое, но это формат XML, так что, вероятно, это не то, что вам нужно.Вы не можете получить изображение из IE без использования плагина.
Другие советы
canvas.toDataURL работает в IE9.
Если вам действительно это нужно для старого IE ..что ж..я просто приведу вам цитату
toDataURL не будет поддерживаться из-за характера метода, используемого Explorer Canvas :VML.Мы не нашли способа растрировать VML в bitmap изображения с использованием JS, и даже не с помощью серверного скрипта.Так что, если вам действительно нужно создать dataURL в IE, вам придется использовать FxCanvas (http://code.google.com/p/fxcanvas/) или FlashCanvas (http://flashcanvas.net/) :два решения, основанные на Flash.
У меня была такая же проблема.Что я хотел сделать, так это преобразовать холст в изображение, а затем открыть его на новой вкладке.Я обнаружил, что его преобразование не было проблемой, но открытие по новой ссылке было проблемой.Я решил эту проблему, сгенерировав изображение, поместив его в тег img, а затем включив его на новую страницу.Затем я открыл указанную новую страницу, используя этот учебник - http://www.javascripter.net/faq/writingt.htm
Вот что я сделал
var canvas = document.getElementById('canvas1');
var dataURL = canvas.toDataURL();
var width = parseInt($("#main").width()); //main is the div that contains my canvas
var height = parseInt($("#main").height());
newWindow("<img src=\"" + dataURL + "\"/>");
function newWindow(content) {
top.consoleRef = window.open("", "Organisational Structure",
"width="+width+",height="+height
+ ",menubar=0"
+ ",toolbar=1"
+ ",status=0"
+ ",scrollbars=1"
+ ",resizable=1")
top.consoleRef.document.writeln(
"<html><head><title>Console</title></head>"
+ "<body bgcolor=white onLoad=\"self.focus()\">"
+ content
+ "</body></html>"
)
top.consoleRef.document.close()
}