0

2 つの質問が一緒に機能するので、1 つにまとめます。

ユーザーが 1 つの HTML5 キャンバスに描いたものを別のキャンバスに複製しようとしています。

これを行うには、javascript を使用して dataURL を取得し、その dataurl に新しい画像を割り当ててから、その画像を割り当てて 2 番目のキャンバスの drawImage を描画します。これがコードです。

duplicate=function(){       
    dataURL = oCanvas.toDataURL();
    img.src = dataURL;
    context2.drawImage(img, 0, 0);
        };

このコードの問題は、複製ボタンを 2 番目のキャンバスに表示するために 2 回押す必要があることです。これは、関数内のすべてを一度に実行しようとしているためだと思います。最初に複製をクリックすると、dataURL と img src が同時に設定され、img.src が空の文字列として表示されます。クリックした 2 番目のタイプは、dataURL がそれであり、img.src がそれを認識していることを既に述べました...

これを修正するにはどうすればよいですか?

ただし、私の主な目標は、この dataURL をデータベースに保存することです。get メソッドで ajax を使用しようとしましたが、ここでの問題は、dataURL に get で問題を引き起こす非常に多くの文字が含まれていることです。

データベースに保存できるように、dataURL をエンコードして get/ajax 対応にする特別な方法はありますか?

どうもありがとうございました！

4

2 に答える 2

0

問題が、あなたがあまりにも多くのことをしている、または2番目の画像を描くのが早すぎることである場合.

img.onload() で context2.drawImage() を呼び出す

于 2012-03-05T14:24:11.097 に答える
0

DBへの格納についてですが、画像データをフォームフィールドに格納し、POSTをシミュレートしていただけないでしょうか。

于 2012-03-05T14:46:20.657 に答える