javascript - ダウンロードのリクエストを送信せずに、js を使用して <img> 要素を保存することはできますか?

Question

リーリー

Answer 1

私も最初はキャンバスを考えていましたが、質問者さんがすでに試しているのを見ました。他にはまだ何も考えていません。

ただし、「ファイル サイズが大きすぎる」という点については、canvas を使用して画像を Base64 に変換した場合、画像形式を png 形式に設定したことが原因である可能性があります。たとえば:

リーリー

この場合は、jpeg 形式に変換し、変換品質を制御して、保存時にサイズが小さくなるようにすることができます。例:

リーリー

これならサイズ的には問題ないような気がします。

追記：上記のaタグのdownload属性を使用しましたが、質問の件名には問題があるかもしれません。

1. リクエストが必要な場合があります。ダウンロード属性がキャッシュから画像を読み取って保存できる場合、キャッシュされた画像をリクエストする必要はないかもしれません (実際、キャッシュされた画像を読み取るメカニズムがあるかどうかはわかりません。まったくないかもしれません)。ただし、大きな画像の場合は、Web ページに読み込まれている場合でも、download 属性を使用してダウンロードする場合は、サーバーからダウンロードする必要があります。

リーリー

2. Firefox のダウンロード属性では、href 内のファイルが現在の Web ページのドメイン名と同じ起源を持つことが必要です。そうでない場合、ファイルはダウンロードされません。しかし、被験者の状況から判断すると、同一のソースからのものであるはずなので、この問題は存在しません。

3.

Answer 2

a タグの download 属性はサポートできますが、互換性の問題があり、通常はサーバーによってより適切なサポートが完了する必要があります。