Question

我正在尝试使用Ajax从URL获取图像，并希望将其转换为数据URL。

到目前为止，我已经做了以下事情（“一切都不工作:(”）

            sforce.connection.remoteFunction({
                        url : newURL,
                        mimeType: 'text/plain',
                        requestHeaders: {"responseType": "arraybuffer"},
                        onSuccess:function(response){
                        console.log(newURL);
                               var reader = new FileReader();
                                reader.onload = function(){
                                  var dataURL = reader.result;
                                  var output = document.getElementById(imageID);
                                  output.src = dataURL;

                                 };
                                 var blob = new Blob([response], {type: "image/png"});
                                 console.log(blob);
                                 reader.readAsDataURL(blob); 
                              }

以上代码返回数据网址但不显示任何图像（已损坏）。

我也做了下面的事情：

首先将响应二进制字符串转换为数组，如下所示

var bytes = new Uint8Array(response.length);
for (var i=0; i<response.length; i++)
    bytes[i] = response.charCodeAt(i);

现在我将上面的数组转换为base64，如下所示

function Uint8ToString(u8a){
  var CHUNK_SZ = 0x8000;
  var c = [];
  for (var i=0; i < u8a.length; i+=CHUNK_SZ) {
    c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
  }
  return c.join("");
}
// Usage
var u8 = bytes;
var b64encoded = btoa(Uint8ToString(u8));

使用上面的base64创建数据URI，如下所示

var dataurl = 'data:image/png;base64,'+b64encoded;

但没有任何效果。

以下是从

获取图片的终点网址

http://featherfiles.aviary.com/2014-10-24/f93707f9c1472f8a/7892b73db1d947adb7bc536d5d03e5c0.png

请帮助我，因为我无法理解如何解决这个问题：（

Answer 1

你能正确获得图像斑点吗？即它的大小是图像的大小吗？如果是，那么你可能只是缺少这一行（从blob创建blobUrl）

var blob = new Blob([response], {type: "image/png"});
var blobUrl= URL.createObjectURL(blob);       //create blobUrl from blob
console.log(blob);
console.log(blobUrl)
reader.readAsDataURL(blobUrl);

无法显示二进制到图像

1 个答案: