-1

特定の Web サイトからすべての画像を取得し、それらを base64 エンコーディングに置き換える方法は? サーバー側のソリューションは機能します。お気に入り：

var img = document.querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
    //replace with base64 encoding
}

理由: RSS フィードに基づいて電子書籍 (mobi) を作成したいと考えていました。既にコンテンツを HTML に変換しましたが、表示するには画像をローカルにする必要があります。画像をbase64に置き換えることが最善の解決策のように見えました。

4

2 に答える 2

1

まず、これがあなたの状況に具体的に当てはまるかどうかはdataわかりませんが、URI はIE ≤ 7ではサポートされておらず、IE 8 のサポートは不安定であることを思い出してください。また、 URIの使用には多くの欠点がある可能性があります。data

とはいえ、気になる点が 2 つあり<img>ます。タグと CSS ファイルです。

スタイルシート内のすべての画像参照をそのURI 表現に置き換えるこのツールを見つけました。data

<img>HTML ページの sに対して同じことを行うものは見当たりませんでしたが、必要なことを行うものを構築することは難しくありません。

または、すべての画像を base64 でエンコードするとファイルサイズが 33% 膨張することを考慮すると、HTML5 アプリ キャッシュを使用できます。これは、HTML ページをオフラインで実行するように設計されており、IE ≤ 9 以外のすべてで機能します。使います。）

要素manifestに属性を追加するだけです:<html>

<html manifest="files.appcache">
    ...
</html>

files.appcacheは単純なテキスト ファイルです。

CACHE MANIFEST
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah

アプリのキャッシュに関する MDN の記事には、より詳細な情報があります。

于 2012-05-31T14:38:45.977 に答える
0

このようなもの：

jQuery + キャンバス:

$("img").load(function(i) {
    var $this = $(this),
        jCanvas = $("<canvas width='" + $this.width() + "' height='" + $this.height() + "'/>"),
        oCanvas = jCanvas[0];

    oCanvas.getContext("2d").drawImage(this, 0, 0);

    this.src = oCanvas.toDataURL();
});

ただし、これは、イメージがスクリプトと同じドメインにある場合にのみ機能します。

デモ: http://jsfiddle.net/K5RY3/3/

于 2012-05-30T16:44:14.190 に答える