个人中心
文章发布
退出
作者热门文章
- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
27
4
我正在尝试结合使用 Ajax 和数据 URI 来加载 JPEG 图像并通过单个 HTTP 请求提取其 EXIF 数据。我正在修改一个库( https://github.com/kennydude/photosphere )来做到这一点；目前这个库使用两个 HTTP 请求来设置图像的来源和获取 EXIF 数据。
获取 EXIF 没问题。但是，我在使用来自 ajax 请求的原始数据作为图像源时遇到困难。
技术小测试的源代码:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function init()
{
// own ajax library - using it to request a test jpg image
new Ajax().sendRequest
(
"/images/photos/badger.jpg",
{ method : "GET",
callback: function(xmlHTTP)
{
var encoded = btoa (unescape(encodeURIComponent(xmlHTTP.responseText)));
var dataURL="data:image/jpeg;base64,"+encoded;
document.getElementById("image").src = dataURL;
}
}
);
}
</script>
<script type="text/javascript" src="http://www.free-map.org.uk/0.6/js/lib/Ajax.js"></script>
</head>
<body onload='init()'>
<img id="image" alt="data url loaded image" />
</body>
</html>
我得到了看起来像是发回的合理 jpeg 数据，原始数据的长度(以字节为单位)和 base64 编码然后未编码的原始数据是相同的。但是，在 Firefox (25) 和 Chrome (31)(当前版本)上设置图像 src 的尝试都失败了 - chrome 显示“损坏的图像”图标，表明 src 格式无效。
我使用这个 mozilla 页面来获取有关 base64 编码/解码的信息:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
知道哪里出了问题吗？环顾四周，我可以创建 base64 编码的图像服务器端，但它可以像这样在客户端完成吗？一方面，base64 编码服务器端明显增加了数据大小，本练习的全部目的是减少从服务器传输的数据量以及请求的数量。
谢谢，尼克
最佳答案
谢谢。我对此做了更多的挖掘，结果证明至少在当前版本的 Firefox 和 Chrome 上有一个解决方案(编辑:IE10 也可以)。您可以使用 XMLHttpRequest2 并使用类型化数组 (Uint8Array)。以下代码有效:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function init()
{
var xmlHTTP = new XMLHttpRequest();
xmlHTTP.open('GET','/images/photos/badger.jpg',true);
// Must include this line - specifies the response type we want
xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e)
{
var arr = new Uint8Array(this.response);
// Convert the int array to a binary string
// We have to use apply() as we are converting an *array*
// and String.fromCharCode() takes one or more single values, not
// an array.
var raw = String.fromCharCode.apply(null,arr);
// This works!!!
var b64=btoa(raw);
var dataURL="data:image/jpeg;base64,"+b64;
document.getElementById("image").src = dataURL;
};
xmlHTTP.send();
}
</script>
</head>
<body onload='init()'>
<img id="image" alt="data url loaded image" />
</body>
</html>
基本上您要求一个二进制响应，然后在将数据转换回(二进制友好的)字符串 String.fromCharCode() 之前创建数据的 8 位无符号整数 View 。 apply 是必需的，因为 String.fromCharCode() 不接受数组参数。然后你使用 btoa()，创建你的数据 url 然后它就可以工作了。
以下资源对此很有用:
和
http://www.html5rocks.com/en/tutorials/file/xhr2/
尼克
关于javascript - 使用来自 ajax 数据 URI 请求的原始图像数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20035615/
27
4
0
当需要将原始类型转换为字符串时，例如传递给需要字符串的方法时，基本上有两种选择。 以int为例，给出: int i; 我们可以执行以下操作之一: someStringMethod(Integer.to
我有一个位置估计数据库，并且想要计算每月的内核利用率分布。我可以使用 R 中的 adehabitat 包来完成此操作，但我想使用引导数据库中的样本来估计这些值的 95% 置信区间。今天我一直在尝试引导
我希望使用 FTP 编写大型机作业流。为此，我可以通过 FTP 连接到大型机并运行以下命令: QUOTE TYPE E QUOTE SITE FILETYPE=JES PUT myjob.jcl 那么
我是 WPF 的新手。 目前，我正在为名为“LabeledTextbox”的表单元素制作一个用户控件，其中包含一个标签、一个文本框和一个用于错误消息的文本 block 。 当使用代码添加错误消息时，我
我们正在使用 SignalR(原始版本，而不是 Core 版本)并注意到一些无法解释的行为。我们的情况如下: 我们有一个通过 GenericCommand() 方法接受命令的集线器(见下文)。 这些命
使用 requests module 时，有没有办法打印原始 HTTP 请求？ 我不只想要标题，我想要请求行、标题和内容打印输出。是否可以看到最终由 HTTP 请求构造的内容？ 最佳答案 Since
与直接访问现有本地磁盘或分区的物理磁盘相比，虚拟磁盘为文件存储提供更好的可移植性和效率。VMware有三种不同的磁盘类型：原始磁盘、厚磁盘和精简磁盘，它们各自分配不同的存储空间。 VMware
我有一个用一些颜色着色器等创建的门。 前段时间我拖着门，它问我该怎么办时，我选择了变体。但现在我决定选择创建原始预制件和门颜色，或者着色器变成粉红色。 这是资源中原始预制件和变体的屏幕截图。 粉红色的
我想呈现原始翻译，所以我决定在 Twig 模板中使用“原始”选项。但它不起作用。例子: {{ form_label(form.sfGuardUserProfile.roules_acceptance)
是否可以在sqlite中制作类似的东西？ FOREIGN KEY(TypeCode, 'ARawValue', IdServeur) REFERENCES OTHERTABLE(TypeCode, T
这个问题是一个更具体问题的一般版本 asked here .但是，这些答案无法使用。 问题: geoIP数据的原始来源是什么？ 许多网站会告诉我我的 IP 在哪里，但它们似乎都在使用来自不到 5 家公
对于Openshift:如何基于Wildfly创建docker镜像？ 这是使用的Dockerfile: FROM openshift/wildfly-101-centos7 # Install exa
结果是 127 double middle = 255 / 2 虽然这产生了 127.5 Double middle = 255 / 2 同时这也会产生 127.5 double middle = (
在此处下载带有已编译可执行文件的源代码(大小:161 KB(165,230 字节)):http://www.eyeClaxton.com/download/delphi/ColorSwap.zip 原
以下几行是我需要在 lua 中使用的任意正则表达式。 ['\";=] !^(?:(?:[a-z]{3,10}\s+(?:\w{3,7}?://[\w\-\./]*(?::\d+)?)?/[^?#]*(
这个问题是一个更具体问题的一般版本 asked here .但是，这些答案无法使用。 问题: geoIP数据的原始来源是什么？ 许多网站会告诉我我的 IP 在哪里，但它们似乎都在使用来自不到 5 家公
我正在使用GoLang做服务器api，试图管理和回答所发出的请求。使用net/http和github.com/gorilla/mux。 收到请求时，我使用以下结构创建响应: type Response
tl; dr:我认为我的 static_vector 有未定义的行为，但我找不到它。 这个问题是在 Microsoft Visual C++ 17 上。我有这个简单且未完成的 static_vecto
我试图找到原始 Awk (a/k/a One True Awk) 源代码的“历史”版本。我找到了 Kernighan's occasionally-updated site ，它似乎总是链接到最新版本
我在 python 中使用原始 IPv6 套接字时遇到一些问题。我通过以下方式连接: if self._socket != None: # Close out old sock
我是一名优秀的程序员,十分优秀！