6

画像を含む単純なキャンバスがあります (画像 500x333):

<canvas id="capEdit" width="500" height="333"></canvas>

次に、CSSを使用してキャンバス/画像に単純な水平反転を適用すると、完全に機能します

.flipH { 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
    filter: 
    FlipH; 
}

私は今、反転した状態でキャンバスに画像を保存しようとしていますが、元の画像のみを保存します。これが私がしようとしていることです:

$(document).on("click", "#applyFlip", function() { // save
        var canvas  = document.getElementById("capEdit");
        var dataUrl = canvas.toDataURL();
        $.ajax({ 
            type: "POST", 
            url: '/ajax/saveFlip.php',
            dataType: 'text',
            data: {
                base64data : dataUrl,
                imgName : imgName
            }
        }); 
    });

質問:これは機能しますか? もしそうなら、なぜそうしないのですか？このように機能することさえできない場合、これらの結果を達成する方法はありますか? 基本的には左右反転して回転させてから保存

4

2 に答える 2

-1

動作しないのは正常だと思います。表示される画像はレンダリングされたバージョンであり、オリジナルには影響しません。

これをチェックしてください、それはあなたを助けるかもしれません:

http://www.nihilogic.dk/labs/canvas2image/

于 2013-06-10T14:00:38.217 に答える