将HTML5画布元素保存到本地文件

Question

我正在开发一个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脚本来解码并将画布保存为图片。而实际上，我只想在我的Android设备上，通过使用HTML5/Javascript，在我的SD卡中完成这个过程...

谢谢。

- dany

Answer 1

你有查看过nihilogic库吗？ http://www.nihilogic.dk/labs/canvas2image/ 它使用toDataUrl()函数，因此您可能会得到一些丑陋的图片名称，但仍然可以获得一张图片。

您也可以使用downloadify，但它使用Flash，我知道在Android上很少使用Flash，这取决于您的情况https://github.com/dcneiner/Downloadify 另外，像kbok一样，我不了解phoneGap，但您可能可以尝试同时使用context.toDataUrl()和fwrite。

- Tim

---

我的工作是： （...）var img64 = canvas.toDataURL("image/png").replace(/data:image\/png;base64,/, ''); var img_ok = decode_base64(img); navigator.notification.alert(img_ok); writer.write(img_ok, true); writer.close();}但是我的 PNG 文件已经损坏了。 :/ - dany

顺便说一句，canvas2image 看起来很酷，但我不想提示用户保存图像，如果能避免这种情况就好了。 - dany

是的，我刚刚测试了一下，那不是我真正想要的。因为我只想写入PNG文件，而Canvas2Image会强制提示。 - dany

我不明白为什么要替换"data:image/png"。你想在写入之前将"image/octet-stream"更改为base64吗？ - Tim

Answer 2

由于在网页中无法访问文件系统（除了一些边缘情况，这里并不适用），所以这是不可能的。

我建议的是使用服务器来生成该文件。既然不可能实现，您可以通过使用插件或Java小程序在客户端上执行“本地”代码的方式找到一种解决方法。

- slaphappy

---

我的Web应用实际上是在本地应用程序中，因为我使用Phonegap，所以我仍然有一个APK文件和访问本地API的权限。因此，这不仅仅是一个Web应用程序。我不能为此使用fopen/fwrite吗？（我尝试过了，但没有任何反应）。 - dany

抱歉，我不了解PhoneGap，所以恐怕无法帮助您。 - slaphappy

Answer 3

为什么不在服务器端将 <canvas> 转换为图像，然后允许用户将图像下载到他们的手机上呢？

- Zhehao Mao

---

你好，因为这是客户的签名，而且我必须在用户离线时进行管理，所以我必须将图像存储一段时间。 现在我的项目更加先进了。我可以获取以base64编码的画布，我尝试解码它，但现在我的png文件似乎已经损坏了。 - dany