Javascript ByteBuffer 到 base64 字符串不返回图像

Javascript ByteBuffer to base64 string not Returning image

在 Intel XDK 中制作 HTML5 应用程序,因此计算在 Javascript 中完成。

案例:从服务器获取 (google) protobuf 消息。将其解析为对象。我们在那里有一张图片,jpg。 Gonne 将其放入 HTML。嘿,你可以为此使用 base64...在 Android 中完成了此操作;在那里你可以使用 BitmapFactory:

Bitmap bitmap = android.graphics.BitmapFactory.decodeStream(document.getDocBlob().newInput());

经过一些 google-fu 发现这样的东西:

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(currentComment.Document.doc_blob.buffer)));

var ByteBuffer = ProtoBuf.ByteBuffer;
var base64String = ByteBuffer.btoa(currentComment.Document.doc_blob.buffer, currentComment.Document.doc_blob.littleEndian, currentComment.Document.doc_blob.noAssert);

这里有问题: 图像不显示:显示损坏的 link 图像。但是使用上面的第一个函数时不会抛出任何错误。我认为我出错的地方是抵消。数据结构如下所示:

buffer: ArrayBuffer
  byteLength: 148199
  __proto__: ArrayBuffer
limit: 69895
littleEndian: true
markedOffset: -1
noAssert: false
offset: 44278
view: DataView

HTML 的设置是这样完成的,并且有效,已经用其他 base64 字符串进行了测试:

commentImage = document.getElementById("img-frame"); 
var source = "data:image/" + image_type + ";base64," + base64String;

commentImage.setAttribute("height", currentComment.Document.doc_height);
commentImage.setAttribute("width", currentComment.Document.doc_width);
commentImage.setAttribute("src", source);

这就是我们让它工作的方式:blob 是整个 blob,带有图像开始和结束的点。

选项 A:正常 btoa() - 更快

var base64StringA =  btoa(String.fromCharCode.apply(null, new Uint8Array(currentComment.Document.doc_blob.buffer.slice(currentComment.Document.doc_blob.offset,currentComment.Document.doc_blob.limit))));

选项 B:Bytebuffer.btoa() - 稍慢(但我认为这是一个更安全的选项,因为它不依赖于 window 中 btoa() 的定义方式,那个是取决于所使用的浏览器...)

var base64StringB = ByteBuffer.btoa(String.fromCharCode.apply(null, new Uint8Array(currentComment.Document.doc_blob.buffer.slice(currentComment.Document.doc_blob.offset, currentComment.Document.doc_blob.limit))), currentComment.Document.doc_blob.littleEndian, currentComment.Document.doc_blob.noAssert);