更新: JavaScript を介して画像を読み込むための作業コードを OP に提供しています。この例には 2 つの画像があり、1 つは HTML に直接埋め込まれたデータ URI を持ち、もう 1 つは base64 画像データを含むテキスト ファイルをダウンロードした後に Ajax コールバックによって構築されたデータ URI を持ちます。その点に注意してください
- 空白は正式には安全ではなく、URL ではサポートされていないため、事前にテキスト ファイルの base64 データから空白/改行を削除しました。次の行を追加することで、JavaScript でこれを行うようにコードを変更できます。
base64img = base64img.replace(/\s+/g, '');
- このリンクを表示すると、2 つの画像が表示されます: http://www.codelib.net/2013/7-9/example.html
- 私の例では、Ajax などのためにいくつかの非常に縮小されたライブラリ関数を使用していますが、それらを使用することをお勧めしているわけではありません。独自の関数も同様に機能するはずです。
- この例の結果は、最近のバージョンの Opera、Chrome、Firefox、Safari、および Internet Explorer (バージョン 8 を含む) で機能します。
- データの暗号化と復号化を行っていますが、原則として画像を表示しても同じように機能します。ただし、まだ動作に問題がある場合は、復号化されたデータを調べて、復号化アルゴリズムがすべてのブラウザーで適切に機能していることを確認することをお勧めします。
データ URI を構成する正しい方法は重要です。現在、適切に形成されたデータ URI は、すべての主要なブラウザーの最新バージョンでサポートされています。コメントに基づいて適切な URI スキームを使用しているように思えますが、コードを見ると、他の人や自分が何が起こっているのかを診断するのに役立ちます。
バイナリ データを使用してデータ URI を形成していますか、それとも base64 エンコーディングのままですか? 一部のブラウザーがバイナリー・データを Unicode 文字値として解釈しようとするのを避けるために、おそらく base64 エンコードのままにしておく必要があります。あなたの画像src
は以下の例のように見えるはずですが、あなたの質問に,
は前のものは見られません.;base64
は JavaScript によって生成されます):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==
おそらく必要なのは;base64
、コンマの前に欠落している部分を指定することだけで、それが機能するはずです。Internet Explorer は、バージョン 8 以降、このようなデータ URI をサポートしており、バージョン 9 ではより優れたサポートを提供しています。Google Chrome は、このタイプの画像を確実にサポートしています。
ユーザーは問題なく画像を保存できることに注意してください(データ画像を保存しようとしましたが、Internet Explorer 10でも通常の画像を保存するのと同じでした)。右クリックを無効にしても、ユーザーはドキュメント インスペクタまたは同等のツールを開いて、ページのリソースを調べて画像を保存できます。キャンバス要素に描画することはできますが、それでもユーザーはスクリーン ショットを撮り、ピクセル単位でレンダリングされた画像を取得できます。