Question

首先，我使用canvas将图像作为ArrayBuffer进行处理。我这样做：

var buf = canvas.getContext("2d").getImageData(0, 0, width, height).data.buffer;

process(buf);

由于相同的原始政策，这不适用于来自与网页不同的域的图片。

要解决这个问题，我最好的选择是XMLHttpRequest。在这里，我得到一个blob;然后我使用FileReader。我可以使用FileReader.readAsArrayBuffer，但是，我还需要图像的尺寸。出于这个原因，我使用FileReader.readAsDataURL。读取数据后，我将结果设置为Image对象的src属性，当图像加载后，我可以得到图像的宽度和高度。

var xhr = new XMLHttpRequest();
xhr.onload = function() {
     var reader = new FileReader();
     reader.onloadend = function() {
         var image = new Image();
         image.src = this.result;
         image.onload = function() {
             var arrayBuffer = dataURItoArrayBuffer(this.src);
         }
     }
     reader.readAsDataURL(xhr.response);
}
xhr.open("GET", source);
xhr.responseType = "blob";
xhr.send();

如前所述，我需要将数据作为ArrayBuffer，所以我已经创建了一个基于此code的函数来从base64进行转换。

function dataURItoArrayBuffer(dataURI) {
   // convert base64 to raw binary data held in a string
   // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
   var byteString = atob(dataURI.split(',')[1]);

   // separate out the mime component
   var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

   // write the bytes of the string to an ArrayBuffer
   var ab = new ArrayBuffer(byteString.length);
   var ia = new Uint8Array(ab);
   for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
   }

   return ab;
}

此函数的结果ArrayBuffer与图像的尺寸不一致。例如，尺寸为32 x 32的图像应该导致ArrayBuffer为3072（32 x 32 x 3），但是，该函数会创建一个270,414的ArrayBuffer，或者与预期值无关的任何其他值。

如何以base64格式为该图像获取一致的ArrayBuffer？我错过了什么吗？

感谢。

如何正确地将base64转换为ArrayBuffer（图像）？

0 个答案: