-1

私はモバイルアプリケーションを開発していて、サーバーから画像をダウンロードする必要がある場合、実際にはPHPをネイティブに実行できない（PhoneGapタイプのセットアップを使用している）ので、データベースから画像をダウンロードするにはどうすればよいかを考えていました。 JavaScriptを介して実行し、ユーザーに表示しますか？

私は次のようなものを想像します：

  1. Ajaxリクエスト、
  2. バイナリデータのHTML文字列を返します
  3. それに何かしますか？

または

  1. Ajaxリクエスト、
  2. 画像への参照のHTML文字列を返します。例：picture1.jpg。JavaScriptで、次のように記述しますdocument.write <img src="http://blahh/img/"+imagePath

これを行うための最良の方法がわかりません。

4

2 に答える 2

1

これは可能ですが、純粋にJavaScriptで行うことはできません。

あなたがPHPについて言及したので、私はその方向に進みます：

  1. すべての画像を保存するデータベースにテーブルを作成します。ある種のimage_contentフィールドが必要で、次のようなベースライン64エンコーダーにすべての画像をロードする必要があります。

    http://www.motobit.com/util/base64-decoder-encoder.asp。image_contentそして、返された文字列をそのフィールドに格納します。

    または、を使用して、PHPで直接Base64に変換するすべての画像を変換するスクリプトを作成できますhttp://php.net/manual/en/function.base64-encode.php。

  2. PHPファイルを作成します。たとえば、giveme_encoded_img.phpそのファイルでは、URLに。のような1つのパラメータが必要ですgimme_encoded_img.php?image_name=header_bg。

    次に、ステートメント内のそのデータを使用image_nameし$_REQUESTてMySQLクエリを実行しWHERE、データベースからエンコードされた画像文字列を選択できるようにします。

    その後、印刷するだけです。

  3. 上記のファイルに対してAjaxリクエストを実行する場合は、目的の画像srcをレスポンスで更新するだけです。これを行うための最良の方法は、応答を受け取り、idでいくつかの要素を取得することです。

    var header_bg = document.getElementById（'header_bg'）; header_bg.src=応答;

    最終的なHTMLは次のようになる必要があります。

    img alt = "Embedded Image" id = "header_bg" src = "data：image / png; base64、iVBORw0KGgoAAAANSUhEUgAAADIA ..."

Baseline64の埋め込みは非常に優れており、特に電子メールに画像を埋め込む必要がある場合、多くの電子メールクライアントは、サーバーからリモート画像を非表示にする代わりに、デフォルトでそれらを表示します。

私は十分に明確だったと思います。

それでも、これは純粋なJavaScriptソリューションではありません。

于 2012-09-26T22:56:01.653 に答える
1

私の考えでは、外部画像を動的にロードする最も簡単な方法は、画像のURL（のような）を含むPHPスクリプトからJSONhttp://www.example.com/pictures/getPicture/YOUR_PICTURE_IDオブジェクトを取得することです。

サーバ側

<?php
    $pictureUrl = 'http://example.com/pictures/picture.jpg'; //You can get it with a database query
    $pictureName = 'Foo';
    $pictureAltText = 'Bar';

    // You can do some stuff here.

    // At the end of the script, write result.
    echo json_encode(compact('pictureUrl', 'pictureName', 'pictureAltText'));
?>

クライアント側

<script type="text/javascript">
    // With jQuery
    $.getJSON('http://www.example.com/pictures/getPicture/YOUR_PICTURE_ID', function(data){
        console.log(data.pictureUrl, data.pictureName, pictureAltText);

        var img = new Image();
        img.src = data.pictureUrl;
        img.setAttribute('alt', data.pictureAltText);

        img.onload = function(){
            // Displaying picture when download completed
            $(img).appendTo('body');
        }
    });
</script>

jQueryを使用しない場合は、XMLHttpRequestを使用してJSONエンコードされた応答を取得し、それを解析する必要があります（MDNドキュメントはhttps://developer.mozilla.org/en-US/docs/JSONで参照できます）。

于 2012-09-26T23:01:57.840 に答える