-1

我正在开发移动应用程序，我在想，如果我需要从服务器下载图片，我实际上无法原生运行 PHP（我使用的是PhoneGap类型设置），那么我如何从数据库下载图片，通过 JavaScript 运行它，然后将其显示给用户？

我会想象这样的事情：

  1. 阿贾克斯请求，
  2. 返回二进制数据的 HTML 字符串
  3. 做点什么？

或者

  1. 阿贾克斯请求，
  2. 返回图片引用的 HTML 字符串，例如：picture1.jpg. 在 JavaScript 中，编写类似document.write <img src="http://blahh/img/"+imagePath

我不确定最好的方法是什么。

4

2 回答 2

1

你可以做到这一点，但不是纯粹在 JavaScript 中。

既然你提到了PHP，我会朝那个方向走：

  1. 在数据库中创建表，您将在其中存储所有图像。您需要有某种image_content字段并在某些baseline64编码器中加载每个图像，例如：

    http://www.motobit.com/util/base64-decoder-encoder.asp。并将返回的字符串存储到该image_content字段中。

    或者您可以编写一些脚本，使用http://php.net/manual/en/function.base64-encode.php.

  2. 制作一个PHP文件。例如，giveme_encoded_img.php在该文件中，您需要在 URL 中有一个参数，例如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="嵌入图像" id="header_bg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."

Baseline64 嵌入非常好，特别是如果您需要在电子邮件中嵌入图像，那么许多电子邮件客户端默认显示它们，而不是从您的服务器隐藏远程图像。

我希望我足够清楚。

这仍然不是一个纯粹的 JavaScript 解决方案。

于 2012-09-26T22:56:01.653 回答
1

在我看来，动态加载外部图片的最简单方法是从包含图片 URL（如）的 PHP 脚本中获取JSON对象。http://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 编码的响应并对其进行解析（您可以在https://developer.mozilla.org/en-US/docs/JSON上查看 MDN 文档）。

于 2012-09-26T23:01:57.840 回答