使用 blob 创建的图像仅包含数字和逗号 [英] Image created with blob only contains numbers and commas

问题描述

我的设备上有一个文件存储在如下文件夹中:

I have a file on my device that is stored in a folder like:

/opt/share/folder/image.jpg

我想使用一些 ajax 请求将这个文件上传到我的服务器上，就像我对标准 HTML 表单所做的一样.

I'd like to upload this file on my server using some ajax request just as I'd do with a standard HTML form.

经过几次搜索，我来创建一个 Blob 文件并将其上传到服务器上；这有效.但问题是我到达时的 jpeg 已损坏并且包含一组数字和逗号(从技术上讲，源文件的字节数):

After few searches, I've come to create a Blob file and upload it on the server; this works. But the problem is that my jpeg at the arrival is corrupted and contains a suit of numbers and commas (technically, Bytes of the source file):

255,216,255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,219,0,67,0,8,6,6,7,6,5,8,7,7

Tizen 的文件系统 API 允许我打开这个文件并读取它的字节 - 这就是我所做的.所以我使用以下代码读取字节，创建一个 blob 并将其上传到我的服务器上:

The Filesystem API of Tizen allows me to open this file and read its bytes - which is what I do. So I use the following code to read bytes, create a blob and upload it on my server:

var raw = fs.readBytes(1024);                    
var blob = new Blob([raw], {type:"image/jpeg"});
var formData = new FormData();
formData.append('screenCapture', blob);

$.ajax({
   type: 'post',
   url: myurl,
   processData: false,
   contentType: false,
   data: formData,
   success: function(data){
             ...

   },
   error: function(jqxhr, status, msg){
          console.log("ERROR! " + msg);
          }
});

推荐答案

我终于发现我的代码出了什么问题.

I finally found what was wrong with my code.

实际上，readBytes 返回的是字节对应的数字数组，但该数组并未格式化为字节数组.

In fact, readBytes return an array of number corresponding to bytes, but the array isn't formatted as a byte array.

从这个数组创建一个新的 Uint8Array 成功了:

Creating a new Uint8Array from this array did the trick:

var raw = fs.readBytes(1024);
var byteArray = new Uint8Array(raw);
var blob = new Blob([byteArray], {type:"image/jpeg"});

这篇关于使用 blob 创建的图像仅包含数字和逗号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！