web-dev-qa-db-ja.com

HTML5 Canvas（readAsBinaryString）からバイナリ（base64）データを取得する

HTMLキャンバスの内容をバイナリデータとして読み取る方法はありますか？

現時点では、入力ファイルとその下のキャンバスを表示する次の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エンコード）を取得して、データをサーバーにプッシュする必要があります...

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

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

javascripthtml5html5-canvasfileapi
72
Jamz_2010

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

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

戻り値はbase = 64でエンコードされたバイナリデータではなくjustですが、スキームとファイルタイプを削除してデータを取得するのは簡単です欲しいです。

toDataURLメソッドは、異なるOriginから読み込まれたデータをキャンバスに描画したとブラウザが判断した場合に失敗するため、この方法は画像ファイルがHTMLページと同じサーバーから読み込まれた場合にのみ機能しますスクリプトがこの操作を実行しています。

詳細については、 canvas AP​​IのMDNドキュメント （toDataURLの詳細を含む）、および data: URIスキームに関するWikipediaの記事を参照してください。 。この呼び出しから受け取るURIの形式の詳細が含まれます。

131
Martin Atkins

キャンバスをどのように描くかを見る

$("canvas").drawImage();

caleb EvansによるjQuery Canvas（ jCanvas ）を使用しているようです。私は実際にそのプラグインを使用し、$('canvas').getCanvasImage();でキャンバスのbase64イメージ文字列を取得する簡単な方法を持っています

動作するFiddleは次のとおりです。 http://jsfiddle.net/e6nqzxpn/

0
Hans Tiono