web-dev-qa-db-ja.com

エンドユーザーがコピーまたは保存できない画像をWebページに作成することは可能ですか？

一部のWebページでは、背景画像をコピーまたは保存できません。私が使用しているブラウザはそれを画像として認識しません。

私が持っている質問は：ユーザーがコピーできないWebページに画像を作成する方法を知りたいです。

例：この githubヘルプページ では、タイトルが書かれている背景画像をコピーして、現在使用しているブラウザに保存することはできません。

画像がJavaScriptコードまたは他の言語で作成されたグラフィックである可能性がありますか？

javascripthtmlcssbackground-image
17
GradDev

リンクのヘッダー画像は、CSSのBASE64エンコード画像文字列から生成されます。最新のブラウザは、このタイプの画像を理解して解析できます。この場合、画像はエンコードされたSVG（Scalable Vector Graphics）画像ですが、JPEG、PNG、GIF、またはBMP画像の場合もあります。

ソースでは、非常に長い文字列の文字列のように見える背景画像を持つdivが表示されます。

<div style="background-image: url(data:image/svg+xml;base64, BASE64-ENCODED-IMAGE-STRING">

（BASE64-ENCODED-IMAGE-STRINGをページソースの元の文字列に置き換えます）

このWebサイト たとえば、BASE64でエンコードされた画像文字列を生成できます。

ただし、これはユーザーが画像を保存またはコピーできないことを意味するものではありません！

たとえば、このWebサイトを使用すると、エンドユーザーが保存/コピーできる形式で画像をデコードできます： http://freeonlinetools24.com/base64-image 。

@aavrugが以下で指摘しているように、これは任意のブラウザーで開発者のツールを使用して実行することもできます。

他のユーザーが指摘しているように、一部のブラウザには、マウスの右クリックを使用するときに背景画像を保存するオプションがあります

@Viktor Mellgrenが指摘しているように：また、スクリーンショットは常にあります

結論

画像がブラウザに表示されると、エンドユーザーが保存できます。画像をより適切に保護するには、専用のツールまたはスクリプトを使用して画像に透かしを入れる方法をご覧ください。

54
Cagy79

すべての画像を保存できます：

enter image description here

別の回答が示すように、画像をbase64文字列に変換できますが、それでも保存およびコピーできます。

そしてどのように？

ここに画像文字列をコピーするだけです http://codebeautify.org/base64-to-image-converter ダウンロード可能な画像を取得します。

22
Dave

知識は力である：

  1. Chromeを開き、 https://guides.github.com/activities/hello-world/ に移動します
  2. 目的の「画像」を右クリックします
  3. 「検査」をクリックします
  4. [スタイル]タブを見てください
  5. element.style-> background-image-> url-> blue hyperlink containing data:imageを右クリックします
  6. 「新しいタブでリンクを開く」をクリックします
  7. Ctrl+s

基本的に、Webブラウザーが何かをレンダリングする場合、それは保存可能/ダウンロード可能です。

10
MonkeyZeus

誰もが画像のbase64コードを取得してコンバーターに貼り付ける方法を説明したので、別のオプションがあります。さらに簡単：Firefoxで問題のページを開きます。コンテキストメニューから[ページ情報の表示]を選択します。 [メディア]タブを選択します。リストから画像を選択します。

Base64コードを変換する必要はありません。 Firefoxには、画像と[名前を付けて保存...]ボタンが既に用意されています。

7
sbecker

ブラウザに送信されるすべての画像は、いずれかの方法でコピーできます。右クリックoncontextmenuとマウスドラッグondragを無効にすることで、技術に精通していない人にとっては難しくすることができます。これにより、ユーザーが画像を右クリックして保存し、デスクトップにドラッグするのを防ぐことができます。

しかし、私が言ったように、そして他の多くの人も言っているように、ブラウザに送信される情報をダウンロードすることはいつでも可能であるということです-いずれにせよ。

6
curly_brackets

最も重要なことは、インターネットに何も入れないでください。絶対にダウンロードしてほしくないのです。ダウンロードできないはずの画像をダウンロードすることは、Netscapeの初期の時代に私が学んだ最初のトリックの1つであり、これは私だけではありません。

画像コンテンツを販売したい場合は、サンプルの一部のみを低品質で公開するか、透かしを追加してください。画像はあなたの所有物であり、購入者が自由に配布しないように、あなたの同意（または補償）なしに他の場所に画像を公開することは許可されていないことを示す著作権メモをいくつか追加します。

Base64エンコーディングなどを使用することには利点があります。まず第一に、ユーザーが誤って画像をデスクトップの背景として誤ってクリックすることはありません。そして第二に、画像を取得するためにいくつかの作業を行う必要があるため、彼らはおそらくそれを行うべきではないことに気づき、おそらくそれが問題の価値があるかどうかを検討します。また、画像検索エンジンの妨げになる場合は、「不正な」コピーを大幅に制限します。

私の言葉を裏付ける統計はありませんが、私の経験では、UIデザイン担当者（およびそのような人）は画像検索結果から多くのコンテンツを取得します。そして、UIスケッチから、これらの画像は誤って制作やマーケティングなどに持ち込まれます。したがって、基本的に、画像が画像検索エンジンに保存された場合、インターネットがそれを所有します。

2
user6408185

また、それが画像ではなく、JavaScriptまたは他の言語のコードによって作成されたグラフィックである可能性はありますか？

オプション1

Htmlでsvgタグを使用します。これはまだまったくコピープルーフではありませんが、コピー先のオプションが減ります。

  • ソースhtmlを見てそれをコピーする
  • スクリーンショット

ほとんどのグラフィックツール、フォトショップなどには、画像をエクスポートできるベクターモードまたはsvgモードがありますそのモードで作成したもの次のようなhtmlタグとして

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
</svg>

ユーザーはこの画像を右クリックして保存することはできませんが、コード自体を調べて盗むことはできます。

オプション2

JavascriptとHTMLキャンバスを使用して、プログラムで画像を描画します。

ユーザーがコピーできる方法：

  • ブラウザからJSコードを盗みます（非常に簡単ですが、キャンバスをサポートするプラットフォームで画像を表示することを計画している場合にのみ役立ちます）
  • スクリーンショット

。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

私の2セントは、あなたが心配している画像の透かしまたは低解像度バージョンのいずれかを使用しています。あなたがウェブサイトに置くものは何でも、彼らがコピーするために何をしているのかを知っている人にとっては些細なことです。上記のオプションは楽しくて興味深いものですが、最終的には開発者にとっては多くの作業であり、1回のキーストロークで無効になります。

最後の考え

平均的なジョーがコピーする能力を軽減する可能性のある最後のアイデアは、特に画像を表示するために10個の異なるキーを保持する必要があることです。他のオプションと同様に、これは自分が何をしているのかを知っている人なら誰でも回避できますが、通常のユーザーは他の指が占有されているときにPrtScnを押すのに苦労します。最高のUXではありません...でもねえ:)

2
SethWhite

さて、それはbase64でエンコードされた画像文字列です：ここで試してみてください： b64.io 問題の画像をこのサイトにドロップすると、次のようになります。

/* file size: 3.2ko | already optimized | base64 size: 4.2ko */
.index {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDAiIGhlaWdodD0iNDQwIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2IoMTI3LCA1NCwgNjApIi8+PHJlY3QgeD0iMCIgeT0iNSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTUiIG9wYWNpdHk9IjAuMTA2NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIyOSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTgiIG9wYWNpdHk9IjAuMTMyNjY2NjY2NjY2NjY2NjUiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSI1NyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSI4MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTMiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIxMTMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMTM3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMyIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjAiIHk9IjE2OSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSIxODQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjciIG9wYWNpdHk9IjAuMDM3MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIxOTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjIwIiBvcGFjaXR5PSIwLjE1IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMjMzIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNiIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjI2MSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iNSIgb3BhY2l0eT0iMC4wMiIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjAiIHk9IjI3MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTQiIG9wYWNpdHk9IjAuMDk4IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMjk4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMiIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjMyNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSIzNTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEzIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMCIgeT0iMzc3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1IiBvcGFjaXR5PSIwLjAyIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMCIgeT0iMzk4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNiIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjQzMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iOSIgb3BhY2l0eT0iMC4wNTQ2NjY2NjY2NjY2NjY2NyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY2NjY3IiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMjkiIHk9IjAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjEzMjY2NjY2NjY2NjY2NjY1IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iNTciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iODIiIHk9IjAiIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMTEzIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjEzNyIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIxNjkiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMTg0IiB5PSIwIiB3aWR0aD0iNyIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjAzNzMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMTk4IiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xNSIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjIzMyIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIyNjEiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDIiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIyNzIiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA5OCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjI5OCIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIzMjciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMzU1IiB5PSIwIiB3aWR0aD0iMTMiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjM3NyIgeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wMiIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjM5OCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSI0MzEiIHk9IjAiIHdpZHRoPSI5IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDU0NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiLz48L3N2Zz4=);
}

さて、私は問題なく画像を表示してディスクに保存することができます（あなたが言及したgithubリンクから）。 Firefoxプラグインが原因で機能するのか、それとも単にFirefoxで機能するのかわかりません。

背景画像を右クリックすると、オプション "背景画像を表示が表示され、画像を表示すると次のように表示されます。

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDAiIGhlaWdodD0iNDQwIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2IoMTI3LCA1NCwgNjApIiAgLz48cmVjdCB4PSIwIiB5PSI1IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNSIgb3BhY2l0eT0iMC4xMDY2NjY2NjY2NjY2NjY2NyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMCIgeT0iMjkiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjE4IiBvcGFjaXR5PSIwLjEzMjY2NjY2NjY2NjY2NjY1IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSI1NyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjAiIHk9IjgyIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMyIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMCIgeT0iMTEzIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMiIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMCIgeT0iMTM3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMyIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMCIgeT0iMTY5IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4wNjMzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMCIgeT0iMTg0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI3IiBvcGFjaXR5PSIwLjAzNzMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIwIiB5PSIxOTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjIwIiBvcGFjaXR5PSIwLjE1IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIyMzMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjE2IiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIyNjEiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUiIG9wYWNpdHk9IjAuMDIiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjAiIHk9IjI3MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTQiIG9wYWNpdHk9IjAuMDk4IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIyOTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIzMjciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIzNTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEzIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIwIiB5PSIzNzciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUiIG9wYWNpdHk9IjAuMDIiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjAiIHk9IjM5OCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTYiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjAiIHk9IjQzMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iOSIgb3BhY2l0eT0iMC4wNTQ2NjY2NjY2NjY2NjY2NyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iNSIgeT0iMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTA2NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjI5IiB5PSIwIiB3aWR0aD0iMTgiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xMzI2NjY2NjY2NjY2NjY2NSIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iNTciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSI4MiIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjExMyIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjEzNyIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjE2OSIgeT0iMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjE4NCIgeT0iMCIgd2lkdGg9IjciIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wMzczMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMTk4IiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xNSIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMjMzIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMjYxIiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjAyIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIyNzIiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA5OCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMjk4IiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMzI3IiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wNjMzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMzU1IiB5PSIwIiB3aWR0aD0iMTMiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMzc3IiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjAyIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIzOTgiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSI0MzEiIHk9IjAiIHdpZHRoPSI5IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDU0NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiICAvPjwvc3ZnPg==

他の人が言っているように、base64でエンコードされた画像文字列を画像として使用でき、最新のブラウザはそれを理解します。これをデコードすると、次のようになります：data：<Type>、<Encoding>、<Encoded data string>

したがって、問題の画像はSVG画像です。これをブラウザで開き、Command + S/Ctrl + Sを使用して保存しようとすると、画像タイプがsvgであることが正しく識別されます。

2
Ravish