Сохранить элемент canvas html5 в файл (локальный)

Я делаю webapp на Android, и у меня есть холст HTML5, на котором пользователь может рисовать то, что он хочет, используя события касания. И я хотел бы сохранить это на SD-карте, поэтому в локальном. И не может использовать любой скрипт на стороне сервера (php и т. Д.), Чтобы сделать это.

Я использую пример magictouch.js :

  <canvas id="example" height=450 width=300></canvas> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="magictouch.js"></script> <script> var CanvasDrawr = function(options) { var canvas = document.getElementById(options.id), ctxt = canvas.getContext("2d"); var img = canvas.toDataURL("image/png"); ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35); ctxt.lineCap = options.lineCap || "round"; ctxt.pX = undefined; ctxt.pY = undefined; var lines = [,,]; var offset = $(canvas).offset(); var self = { //bind click events init: function() { canvas.addEventListener('touchstart', self.preDraw, false); canvas.addEventListener('touchmove', self.draw, false); }, preDraw: function(event) { $.each(event.touches, function(i, touch) { var id = touch.identifier; lines[id] = { x : this.pageX - offset.left, y : this.pageY - offset.top, color : options.color || ["black"] }; }); event.preventDefault(); }, draw: function(event) { var e = event, hmm = {}; $.each(event.touches, function(i, touch) { var id = touch.identifier; var moveX = this.pageX - offset.left - lines[id].x, moveY = this.pageY - offset.top - lines[id].y; var ret = self.move(id, moveX, moveY); lines[id].x = ret.x; lines[id].y = ret.y; }); event.preventDefault(); }, move: function(i, changeX, changeY) { ctxt.strokeStyle = lines[i].color; ctxt.beginPath(); ctxt.moveTo(lines[i].x, lines[i].y); ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY); ctxt.stroke(); ctxt.closePath(); return { x: lines[i].x + changeX, y: lines[i].y + changeY }; } }; return self.init(); }; $(function(){ var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example", size: 2 }); console.log('loaded'); }); </script> </body> 

Но все примеры, которые я встречал в Интернете, были использованы с php-скриптом на сервере для декодирования и сохранения canva как изображения. И на самом деле просто хочу сделать это на своем Android-устройстве, в моей SD-карте, просто используя HTML5 / Javascript

Благодарю.

Вы проверили нигилогическую библиотеку? http://www.nihilogic.dk/labs/canvas2image/

Он использует функцию toDataUrl (), чтобы вы могли получить уродливое название изображений, но все же у вас будет фотография.

Вы также можете использовать загрузку, но она использует флеш-память, и я знаю, что флеш не часто находится на android, зависит от вашего дела https://github.com/dcneiner/Downloadify

Также я, как и kbok, не знаю phoneGap, но вы, вероятно, можете попробовать использовать как context.toDataUrl (), так и fwrite.

Это невозможно, так как у вас нет доступа к файловой системе с веб-страницы (кроме некоторых случаев с краем, которые здесь не полезны).

Конечно, я бы посоветовал использовать сервер для создания этого файла. Поскольку это невозможно, вы можете найти способ выполнить «собственный» код на клиенте с помощью плагина или апплета Java.

Почему бы вам не преобразовать изображение на сервер, а затем разрешить пользователю загружать изображение на свой телефон?