javascript - HTML Canvas 要素から画像データを生成する

Question

HTML キャンバス要素のコンテンツから画像データを生成する最良の方法は何ですか?

サーバーに送信できるように画像データを作成したいです（ユーザーが直接ファイルに保存できる必要はありません）。画像データは、PNG や JPEG などの一般的な形式である必要があります。

複数のブラウザーで正しく動作するソリューションが優先されますが、すべてのソリューションがブラウザーに依存している場合は、Firefox の最近のバージョンをターゲットにする必要があります。

Answer 1

Firefox と Opera にはtoDataURL()、data-URL 形式の PNG を返すメソッドがあります。結果をフォーム フィールドに割り当てて、サーバーに送信できます。

データ URL は base-64 でエンコードされているため、サーバー側でデコードする必要があります。「data:image/png;」も削除する必要があります。もちろん一部。

Answer 2

使用できるlibはCanvas2Imageだと思います。これは、Canvasのネイティブ機能を使用しますが、どのブラウザーでも機能しません。私はこのlibの最適化されたバージョンを持っています、あなたが望むなら、私はあなたとそれを共有します。

次に、生成されたデータURIを取得し、Ajaxを使用してサーバーに送信できます。