88

HTML Canvas の内容をバイナリデータとして読み取る方法はありますか?

現時点では、入力ファイルとその下のキャンバスを表示する次の HTML があります。

<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

次に、正常に動作するキャンバスを正しく設定するように入力ファイルをセットアップしました。

$('#fileInput').on('change', function() {
    $.each(this.files, function() {
        var image = new Image();
            image.src = window.URL.createObjectURL(this);

        image.onload = function() {
            $("canvas").drawImage({
                source: image,
                x: 50, y: 50,
                width: 100,
                fromCenter: false
            });
        };
    });
});

ボタンがクリックされたときにキャンバスからバイナリ データ (Base64 エンコード) を取得する必要があるため、データがサーバーにプッシュされます...

最終結果は、ユーザーがファイルを選択し、トリミング/サイズ変更し、編集された画像がサーバーにアップロードされるボタンをクリックできるようにする必要があることです (サーバー側ではできません)サーバー側の制限によるトリミング/サイズ変更...)

どんな助けでも素晴らしいでしょう！乾杯

4

3 に答える 3

155

このcanvas要素は、base64 でエンコードされた画像データを特定の形式で含む URLtoDataURLを返すメソッドを提供します。data:例えば：

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

戻り値はbase64 でエンコードされたバイナリ データだけではありませんが、必要なデータだけを取得するためにスキームとファイル タイプを削除するのは簡単なことです。

toDataURL別のオリジンからロードされたデータをキャンバスに描画したとブラウザーが判断した場合、このメソッドは失敗します。したがって、このアプローチは、スクリプトがこれを実行している HTML ページと同じサーバーから画像ファイルがロードされている場合にのみ機能します。手術。

詳細については、 APIに関する MDN ドキュメントをcanvas参照してください。これには に関する詳細が含まれています。toDataURLまた、 URI スキームに関するウィキペディアの記事にはdata:、この呼び出しから受け取る URI の形式に関する詳細が含まれています。

于 2013-03-28T15:30:11.347 に答える
1

キャンバスの描画方法を確認する

$("canvas").drawImage();

Caleb Evans によるjQuery Canvas ( jCanvas ) を使用しているようです。私は実際にそのプラグインを使用しており、キャンバスのbase64画像文字列を取得する簡単な方法があります$('canvas').getCanvasImage();

これがあなたのために働くフィドルです：http://jsfiddle.net/e6nqzxpn/

于 2015-12-03T20:38:31.027 に答える