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 キャンバス要素から取得した画像をサーバーにアップロードするために問題が発生しました。少なくとも 1 時間苦労しましたが、サーバーに画像を正しく保存できませんでした。

キャンバス要素から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);

my toの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 に答える