javascript - 使用 xmlhttprequest 获取跨域 PNG 文件

Question

可悲的是，我看到了无数类似的问题，但没有任何答案似乎适合我的情况。我没有使用 jquery。我只关心最新的浏览器(尤其是 Chrome)。我正在寻找一种从 PNG 或 JPG 文件的跨域获取中加载 javascript 图像的方法。

即我只想这样做:

var img1 = new Image();
img1.addEventListener('load', function() { imageLoaded( canvas, context, this); }, false)
img1.src = textureUrl;

这对同一个域非常有效。但是，显然这不会在请求 header 中包含 Origin 标记，因此它无法在跨域环境中工作，即使我们已经在服务器上成功设置了 CORS header 。如果我可以对这个请求做一些简单的事情来包含那个 header ，那就太好了。

但我认为我必须做的是使用 XHR 异步获取 Assets ，获取二进制数据，然后以某种方式将该数据推送到常规 Image() 对象中。我相信我们已经成功地获得了各种形式的数据(尝试过 arraybuffer 和 blob)，但没有成功地将其塞入 Image() 对象。

例如:

var img3 = new Image();
var req = new window.XMLHttpRequest();
req.overrideMimeType('text/plain; charset=x-user-defined');  // seems to make no difference
req.responseType = 'arraybuffer';  // no joy with arraybuffer or blob
req.open("GET", textureUrl, true, "", "");  // async request allows CORS preflight exchange

req.onreadystatechange = function (oEvent) {
  if (req.readyState === 4) {
    if (req.status === 200) {
        alert( "XHR worked" );
        if( req.response ) {
          alert( "resp text: " + req.response );  // identifies response as arraybuffer or blob
        }

        // I believe this section is where I need the most help.

        // var base64Img = window.btoa(unescape(encodeURIComponent( req.responseText)) );

        var base64Img = window.btoa( unescape( encodeURIComponent( req.response ) ) );
        alert( "b64: " +  base64Img );  // vaguely uu64ish, but truncated
        var src = "";
        if( isPng == 1 ) {  // just to indicate the src url is built differently for jpg.
            alert("png");
            src = 'data:image/png;base64,' + base64Img;
        } 

        ....
        img3.src = src;  // img3 loads fine if I just jam a same domain url here

  <closing braces>

从我读到的内容来看，如果我指定 arraybuffer，我不清楚是否需要覆盖 mime 类型，但我不清楚。

我取回了数据(没有跨域错误，是的)，它的大小似乎合适，但我不相信我成功地对它进行了 uu64 编码，也不相信我正在将合适的数据 url 插入到图片。

同样，我只需要它来使用最新的 Chrome 浏览器，并且我希望尽可能“纯 HTML5”，所以我觉得不需要使用 IE7 等。

我不知道 req.response 是否包含 HTTP 响应的第一行(也就是说，我有责任在 uuencoding 之前 trim 一些东西......)

希望你能揭开我的面纱!

提前致谢。

Answer 1

我在同一个问题上卡住了一段时间。这是您需要做的才能使其正常工作:

对于 zip/png 等格式，你应该使用:

req.responseType = 'arraybuffer';

棘手的事情是在 arraybuffer 的情况下，req.responseText 不起作用，而是使用 req.response

var base64Img = window.btoa(
  unescape(
    encodeURIComponent(req.response)
  )
);