JavaScript « Экспорт canvas в изображение

Делаю сайт, конструктор визиток, и мне нужно результат отрисованный на холсте (canvas) сохранить в изображение, для этого была написана вот такая функция:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
function createImageDataPressed(e)
    {
      var elem = document.getElementById('canvas');
      window.open(elem.toDataURL(),"canvasImage","left=0,top=0,width=" + elem.width + ",height=" + elem.height + ",toolbar=0,resizable=0");
    }


Но дело в том, что рисунок просто открывается в новом окне, а в качестве адреса URL - base64 код PNG изображения, такого вида:
data:image/png;base64,iVBORw...

Подскажите, как можно сделать, чтобы было data:image/tiff или data:image/pdf ? Помогите, пожалуйста!
0
canvas javascript

1 ответов

Ключевой метод здесь .toDataURL(). Канву можно преобразовывать в base64. Если надо что-то иное, то нужно отправить эти данные на сервер и там обработать соответствующим образом.

2