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

Question

Я делаю веб-приложение на Android, и у меня есть HTML5 Canvas, на котором пользователь может рисовать то, что он хочет, используя сенсорные события.И я хотел бы сохранить это на SDCard, поэтому в местном.И я не могу использовать какой-либо серверный скрипт (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-скриптом на сервере для декодирования и сохранения канвы в виде изображения.И на самом деле просто хочу сделать это на моем устройстве Android, в моей SDCard, просто используя HTML5 / Javascript ...

Спасибо.

Answer 1

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

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

Вы также можете использовать downloadify, но он использует вспышку, и я знаю,Флэш не часто на Android, зависит от вашего случая https://github.com/dcneiner/Downloadify

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

Answer 2

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

Answer 3

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

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