파일에 html5 캔버스 요소 저장 (로컬)

Question

저는 Android에서 webapp을하고 있으며, 사용자가 터치 이벤트를 사용하여 원하는 것을 그릴 수있는 HTML5 캔버스를 가지고 있습니다. 그리고 나는 이것을 SD 카드에 저장하고 싶다. 그리고 그 물건을 할 수있는 서버 측 스크립트 (PHP 등)를 사용할 수 없습니다.

<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 스크립트와 함께 사용되었다 :

나는 magictouch.js 예를 사용하고 있습니다. 그리고 실제로 내 안드로이드 장치, 내 sdcard, 단지 HTML5/Javascript를 사용하여 그것을하고 싶다 ...

고마워.

Answer 1

웹 페이지에서 파일 시스템에 액세스 할 수 없기 때문에 불가능합니다 (여기서는 유용하지 않은 일부 경우 제외).

물론이 파일을 생성하기 위해 서버를 사용하는 것이 좋습니다. 가능하지 않기 때문에 플러그인이나 Java 애플릿을 사용하여 클라이언트에서 "원시"코드를 실행할 수있는 방법을 찾을 수 있습니다.

Answer 2

니힐 로그 라이브러리를 확인 했습니까? http://www.nihilogic.dk/labs/canvas2image/

toDataUrl() 함수를 사용하면 못생긴 이름의 그림을 얻을 수 있지만 여전히 그림이 표시됩니다.

또한 downloadify 사용할 수 있지만 플래시를 사용하고 난 https://github.com/dcneiner/Downloadify

이 또한 내가 kbok처럼, 폰갭을 모르는 사용자의 경우, 플래시가 종종 안드로이드에 아니라는 것을 알고 의존하지만, 당신은 아마 모두 사용을 시도 할 수 있습니다 context.toDataUrl() 및 fwrite.

Answer 3

왜 서버 측의 이미지로 변환 한 다음 사용자가 이미지를 전화기로 다운로드하도록 허용합니까?