0

我在保存画布时遇到了困难。我是 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;

我究竟做错了什么？

这是我正在尝试做的基本 jsfiddle：http: //jsfiddle.net/sMSeX/

4

1 回答 1

0

关于上传 HTML5 画布图像数据的一点提示：

我正在为一家印刷店开发一个项目，由于将来自 HTML5 画布元素的图像上传到服务器而遇到了一些问题。我至少挣扎了一个小时，但我无法将图像正确保存在我的服务器上。

我从画布元素通过 Base64 解码得到图像数据

        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为'application/x-www-form-url-encoded'：

    $.ajax({
              url: 'index.php?page=upload-image',
              type: 'post',
              contentType: 'application/x-www-form-urlencoded',
              //data: '{ "imageData" : "' + dataURL + '" }',
              data: dataURL,
              beforeSend: function() {
                $('.text-danger').remove();
              },
              complete: function() {

              },
              success: function(json) {
                console.log('upload complete'); 
              }
    });

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

也许有人可以帮助！

于 2015-12-10T15:14:00.867 回答