2

キャンバスに描かれた画像があります。ページに HTML 入力ボタンとして保存があります。このボタンをクリックすると、名前を付けて保存ダイアログが表示され、この画像を jpeg 形式でディスクに保存する必要があります。JavaScriptを使用してこの機能を実行するにはどうすればよいですか?

4

2 に答える 2

5

からの base64 URI をリンクの属性canvas.toDataURLとして使用します。hrefdownload

次のようになります。

<a href="data:image/png;base64,iVBORw0..." download="my-image">Save Image</a>
于 2012-12-31T11:32:44.917 に答える
1

eligrey ポリフィルを使用して画像をディスクに保存します。

W3C ファイル API には、生成されたデータを saveAs(data, filename) と同じくらい簡単に保存できる FileSaver インターフェイスが含まれていますが、残念ながら最終的に仕様から削除される予定です。a JavaScript library called FileSaver.js、最新のすべてのブラウザーに FileSaver を実装します。ブラウザーで任意のタイプのファイルを生成できるようになったため、ドキュメント エディターは、オンライン接続に依存しない即時保存ボタンを使用できます。標準の HTML5 canvas.toBlob() メソッドと組み合わせると、FileSaver.js を使用すると、キャンバスを即座に保存してファイル名を付けることができます。これは、HTML5 画像編集 Web アプリケーションに非常に役立ちます。

canvas.toBlob() をまだサポートしていないブラウザの場合は、canvas-toBlob.js を使用してください。

論文

デモ

于 2012-12-31T11:29:46.243 に答える