Question

我在保存画布时遇到了困难。我是javascript的新手，所以我认为这可能是一个语法问题。

我在函数中保存了一些变量：

var imageView = document.getElementById("imageView");
var canvasData = imageView.toDataURL("image/png");
var postData = "canvasData="+canvasData;

如果我添加以下行，则会正确显示图像：

imgData = $('#i').append($('<img/>', { src : canvasData }));

但是，我有另一个函数，我想传递base64代码，所以我添加了：

var  the_data = "test= "+imageView.toDataURL("image/png");

它会打印出base64代码，但只打印空白画布（不是用户添加的绘图）。

如果我添加以下内容则不起作用：

  var  the_data = "test= "+canvasData;

我做错了什么？

这是我要做的事情的基本思路：http://jsfiddle.net/sMSeX/

Answer 1

从我这边稍微提示上传HTML5画布图像数据：

我正在为一家印刷厂开展项目，并且由于将图像上传到来自HTML5 canvas元素的服务器而出现了一些问题。我至少挣扎了一个小时，我没有得到它在我的服务器上正确保存图像。

我将图像数据作为Base64从canvas元素通过

解码

        var can = document.getElementsByTagName('canvas');
        var dataURL = can[0].toDataURL("image/jpg");
        //dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
        console.log('data url: '+dataURL);

一旦我设置了 contentType至jQuery ajax call的{{1}}选项：

'application/x-www-form-url-encoded'

一切都正确，并且base64编码的数据被正确解释并成功保存为图像。

也许有人帮忙！

无法通过HTML画布保存图像

1 个答案:

从我这边稍微提示上传HTML5画布图像数据：