3

我正在尝试在用户使用我的网站时截取用户屏幕的屏幕截图，然后使用 html2canvas 将其上传到服务器。这适用于我使用 Chrome 和 Firefox 的桌面（屏幕 > html2canvas > imageURL > Unit8Array > Blob > 上传）。

但是，当我在 iPad 上运行代码时，Blob 创建代码会混淆 html2canvas 图像文件的输入。图像从大约 40k 大小无明显原因地缩小到 19 字节。下面是我的代码。

iPad 的输出使用“ * ”突出显示。

var unit8 = new Uint8Array(imageArray);
var imgBlob;

// check length of encoded image
// *** On this iPad, this generates meaningful size eg 41240 ***
if(navigator.userAgent.match(/iPad/i) != null){                     
    alert('length of the Unit8Array: ' + unit8.length);
}

if(typeof Blob !== 'undefined'){
    // detect if Blob object is supported
    // *** The iPad supports Blob object, it even support it's constructor ***
imgBlob = new Blob([unit8], {type: 'image/jpeg'});
} else if(window.BlobBuilder || window.MSBlobBuilder || 
            window.WebKitBlobBuilder || window.MozBlobBuilder) {
    // generating Blob - the old fashion way
    // Not used by iPad
    var blobBuilderObj = new (window.BlobBuilder || window.WebKitBlobBuilder ||
              window.MozBlobBuilder || window.MSBlobBuilder)();
    blobBuilderObj.append(unit8.buffer);
    imgBlob = blobBuilderObj.getBlob('image/jpeg');
} else {
    // Cannot generate Blob
    alert('Error occurred during Blob generation');
    return;
}

// check length of encoded image
// *** On the iPad imgBlob.size = 19 and imgBlob.toString() = [Object Blob] ***
if(navigator.userAgent.match(/iPad/i) != null){
    alert('Before attach 1: length of the encoded message: ' + imgBlob.size + 
        ', Blob content: ' + imgBlob.toString());
}

知道为什么吗？

非常感谢，海

4

1 回答 1

2

根据我对此处评论的研究，您似乎必须传递给 Blob() 构造函数而不是 Uint8Array 对象，但它是缓冲区属性：

新 Blob（[unit8.buffer]，{..}）

至少通过这种方式，我设法创建了可以在 iPhone5 上的 iOS6 上上传的 Blob。

于 2013-08-27T11:27:20.977 回答