Lưu phần tử canvas5 vào tệp (địa phương)

Question

Tôi đang làm một ứng dụng web trên Android và tôi đã tạo Canvas HTML5 mà người dùng có thể vẽ những gì anh ta muốn bằng các sự kiện chạm. Và tôi muốn lưu điều này trên một sdcard, do đó, tại địa phương. Và không thể sử dụng bất kỳ kịch bản phía máy chủ (php vv) để làm điều đó.

Tôi đang sử dụng một ví dụ 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> 

Nhưng tất cả những ví dụ mà tôi đã gặp trên Internet đã được sử dụng với một kịch bản php trên máy chủ để giải mã và lưu canva như một hình ảnh. Và thực sự chỉ muốn làm điều đó trên thiết bị Android của tôi, trong sdcard của tôi, chỉ bằng cách sử dụng HTML5/Javascript ...

Cảm ơn.

Answer 1

Điều này là không thể vì bạn không có quyền truy cập hệ thống tệp từ trang web (Ngoại trừ một số trường hợp cạnh, không hữu ích ở đây).

Điều tôi khuyên, tất nhiên, là sử dụng máy chủ để tạo tệp này. Vì không thể, bạn có thể tìm cách thực thi mã "gốc" trên máy khách bằng cách sử dụng một plugin hoặc một applet Java.

Answer 2

Bạn đã kiểm tra thư viện nihilogic chưa? http://www.nihilogic.dk/labs/canvas2image/

Sử dụng hàm toDataUrl() để bạn có thể nhận được tên ảnh xấu nhưng vẫn sẽ có ảnh.

Bạn cũng có thể sử dụng downloadify nhưng nó sử dụng đèn flash và tôi biết đèn flash không phải là thường xuyên trên android, tùy thuộc trường hợp của bạn https://github.com/dcneiner/Downloadify

Ngoài ra tôi, như kbok, không biết PhoneGap nhưng có thể bạn có thể thử sử dụng cả hai context.toDataUrl() và fwrite.

Answer 3

Tại sao bạn không chuyển đổi sang hình ảnh ở phía máy chủ và sau đó cho phép người dùng tải hình ảnh xuống điện thoại của họ?