將html5 canvas元素保存爲文件（本地）

我正在Android上做一個webapp，並且我有一個HTML5 Canvas，用戶可以在其上使用觸摸事件繪製他想要的內容。我想保存在SD卡上，所以在本地。並且不能使用任何服務器端腳本（php等）來做這些事情。將html5 canvas元素保存爲文件（本地）

我使用的是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來做到這一點...

謝謝。

來源

2011-07-05 dany

你有沒有想過這個？ – user899641

這是不可能的，因爲您無法從網頁訪問文件系統（除了一些邊緣情況，這在這裏沒有用）。

我會建議，當然，是使用服務器來生成這個文件。由於這是不可能的，你可能會找到一種方法來使用插件或Java applet在客戶端上執行「本機」代碼。

來源

2011-07-05 09:54:29 slaphappy

我的web應用程序實際上是在本機應用程序中，因爲我使用Phonegap，我仍然有一個apk文件並可以訪問本機API。所以這不是'只'一個Web應用程序。我不能使用fopen/fwrite來達到這個目的？（我試過但沒有任何反應）。 – dany

那麼我不知道phonegap，所以我害怕我不能幫你。 – slaphappy

你檢查過nihilogic庫嗎？ http://www.nihilogic.dk/labs/canvas2image/

它使用toDataUrl（）函數，所以你可能會得到一個醜陋的圖片名稱，但你仍然會有一張圖片。

您還可以使用downloadify但使用閃光燈，我知道閃存是不是經常在Android上，取決於你的情況https://github.com/dcneiner/Downloadify

另外我，像kbok，不知道PhoneGap的，但你也許可以嘗試同時使用context.toDataUrl（）和fwrite。

來源

2011-07-05 13:27:24 Tim

我的工作是：（...） var img64 = canvas.toDataURL（「image/png」）。replace（/ data：image \/png; base64，/，''）; var img_ok = decode_base64（img）; navigator.notification.alert（img_ok）; \t writer.write（img_ok，true）; \t writer.close（）; } 但我的PNG文件已損壞。：/ – dany

btw canvas2image看起來很酷，但我不想提示用戶保存圖像，如果我可以避免它可能會很好 – dany

Yup剛剛測試過，這不是我真正想要的。因爲我只想寫PNG文件，並且Canvas2Image強制提示。 – dany

爲什麼你不將圖像轉換爲服務器端的圖像，然後允許用戶將圖像下載到手機上？

來源

2011-07-05 13:29:42

嗨，因爲這是客戶的簽名，而且我必須在用戶離線時進行管理，所以我必須將img存儲一段時間。我現在在我的項目中更先進。我可以用base64編碼的畫布，我試圖解碼它，但現在我的PNG文件似乎損壞。 – dany

將html5 canvas元素保存爲文件（本地）

回答

相關問題