Как сохранить холст HTML5? - PullRequest
Новая
       9

Как сохранить холст HTML5?

12 голосов
/ 30 марта 2010

В настоящее время я использую Canvas2Image для сохранения содержимого моего холста HTML5. Однако он не работает в Google Chrome. Любые идеи о том, как обойти эту проблему, приветствуются. :)

Ответы [ 4 ]

7 голосов
/ 30 марта 2010

canvas.toDataURL() в Chrome работает нормально, поэтому это может быть проблема с библиотекой. Похоже, что работает функция «конвертировать холст в изображение».

5 голосов
/ 09 января 2013

используйте этот код 

<html>
<head>
<script src="base64.js" type="text/javascript"></script>
<script src="canvas2image.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="savecanvas" value="Save Image" onclick="savecanvasfile()"/>
</body>
</html>



<script>
function savecanvasfile(){
    var canvas = document.getElementById('canvas_name');
    var context = canvas.getContext('2d');
    var strDataURI = canvas.toDataURL();
    Canvas2Image.saveAsPNG(canvas);
}
</script>

Загрузите эти canvas2image.js и base64.js и сохраните их в локальной папке для работы этого кода.

Они будут доступны на сайте http://www.nihilogic.dk/labs/canvas2image/

4 голосов
/ 27 сентября 2010 
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');
2 голосов
/ 14 августа 2010

Да, я сделал это! =) * * Тысяча одна

Взгляните на www.assembla.com / code / codetodiagram / subversion / узлы / экспериментальный / canvasBox / default / CanvasBox.js? Rev = 239 # ln1235 . Вы можете видеть, что это работает на http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html.

Чтобы изображение не показывалось в браузере, а было загружено одним файлом, мне нужно создать этот простой php-файл: www.assembla.com / code / codetodiagram / subversion / узлы / экспериментальный / canvasBox / default / download.php? ред = 23 9

Мне нужно создать файл close.html для браузера. Не сохраняйте страницу about: blank после начала загрузки. www.assembla.com / code / codetodiagram / subversion / nodes / экспериментальный / canvasBox / default / close. HTML? ред = 239

Я, вероятно, сделаю большой пост об этом на thiagomata.blog.com, но я думаю, что с этими файлами вы уже сможете найти путь.

Возможно, если вы будете читать этот пост в будущем, ссылка на thiagomata.com может быть нарушена, потому что я скоро перенесу этот проект на codetodiagram.com.

Вот и все! Тьяго Мата

...