通过 AJAX 发布画布 blob：防止/删除本地缓存

Question

我正在使用这样的方法通过 AJAX 将画布图像上传到我的服务器：

myCanvas.toBlob( function( blob ) {
    var fdata = new FormData( );
    fdata.append( 'myFile', blob );
    $.ajax( {
        url: 'http://myScript.foo',
        type: 'POST',
        data: fdata,
        processData: false,
        contentType: false
    } );
}, 'image/jpeg', 0.9 );

（感谢https://stackoverflow.com/a/8244082/1180785）

但根据 Mozilla，

toBlob […] 返回代表画布中包含的图像的Blob 对象；这个文件可以缓存在磁盘上，也可以由用户代理决定存储在内存中

(https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)

对于我的程序来说，不保留图像非常重要（不是作为限制，而是出于隐私考虑）。所以我需要知道是否可以保证删除这个可能的缓存副本，以及何时删除。还有一个潜在的风险是取消删除程序找到它，所以我想知道我是否可以覆盖数据或以其他方式强制安全删除。

如果可以在不冒险使用本地缓存副本的情况下获得相同的结果，那就更好了。如果可能的话，加密也是一种选择。

我只关心现代浏览器，特别支持 getUserMedia，所以没有 IE（我有一个 Flash 后备，用于处理内存中所有内容的旧浏览器）。

Answer 1

如果隐私和安全很重要，您应该考虑从画布生成data-uri，而不是Blob 对象。

由于 blob 可能会或可能不会临时存储（缓存）在磁盘上，因此文件将受到安全情况的影响（即您提到的 取消删除）。内存文件/字符串当然可用于内存扫描，但这与从画布获取图像进行传输时接近“安全”一样接近。

data-uri通常^*仅在内存中生成，通常包含 base64 编码图像（如果您的图像在那里非常大仍然存在被分页到磁盘的风险）。

^*) 依赖于实现，例如如果可用内存资源稀缺，移动浏览器更有可能使用临时文件 - 但是，没有记录这种可能的行为。

要获得data-uri，请改用：

canvas.toDataURL();

您可以选择指定图像类型（默认为 PNG）：

canvas.toDataURL('image/jpeg'); //optional second parameter is quality [0.0, 1.0]

另一种选择是直接从画布中提取像素并存储在（类型化的）数组中。然后可以按原样传输数据，也可以在发送数据之前使用压缩库压缩为例如 zip。

但是，这种方法效率最低。

Answer 2

很可能会删除 blob，

1. 没有对它的引用（垃圾收集）
2. 选项卡/窗口已关闭

在这种情况下，“缓存”并不意味着在很长一段时间内，而是每次访问时都不会重新计算。

长期缓存内容会浪费存储空间，因为画布是动态设计的。如果是静态内容，则应使用<img>。

我没有看过任何源代码，但这是一个合乎逻辑的结论。在 jQuery 停止引用 blob 之后（发送请求时），它应该被垃圾收集器拾取并丢弃。

---

安全删除是非常低级别的，浏览器永远不会允许它。它基本上通过写入硬盘驱动器上的特定地址来工作，这可能会被错误计算并破坏数千个文件（在一个严重碎片化的分区中）。如果他们将其存储到磁盘上，则可以通过计算机取证来恢复。