javascript - 在 Javascript 中将 Blob 的一部分绘制到 html Canvas 上，无需数据 url

Question

我正在使用一个网络应用程序进行测试，用户可以在其中看到图像的几部分，但不能同时看到全部图像。整个数据被发送到客户端并在客户端解密。该数据随后采用 Base64 格式，因此我只需使用:

img.src = 'data:image/jpeg;base64,' + imgdata;

为了显示它。然后我就可以打电话

my2Dcontext.drawImage(img, x, y, width, height)

一切都会好的，对吧？

除此之外，原始的完整数据非常容易下载。只需从图像中复制数据源，然后下载或打开检查器并以这种方式下载。

出于这个原因，我想知道如何才能将数据从 imgData 获取到屏幕上，而不必将其全部放在屏幕上。

有没有办法将数据中的部分图像渲染到 Canvas 上，而无需创建全图像数据 URL 之类的东西？

我知道这是一个奇怪的情况，但如果你们中有人有任何创意，我将非常感激!

(P.S，我知道这在某种意义上本质上是通过模糊来实现安全性，如果他们可以在屏幕上单独显示这些部分，他们就可以将它们修补在一起。我只是想阻止最简单的提取级别.谢谢)

Answer 1

嗯，您实际上无法保护显示的图像不被确定要获取该图像的用户使用。然后可以使用一个简单的屏幕抓取工具将图像的图 block /部分拼凑在一起。高级用户可以注入(inject)脚本来自动执行相同的操作。

但是，为了创造性的方法:

图像数据混淆

可以选择在交付之前对数据本身进行混淆，这样如果尝试下载源，它将毫无用处。当在 Canvas 上显示时，您可以“解码”数据，以便其正确显示(但然后再次引用回屏幕抓取工具，用户必须选择将 Canvas 另存为图像等)。

不过，混淆并不一定非常复杂，您需要找到一种可以扰乱源位图数据的算法，以及同样将其恢复正常的方法 - 这当然会有它自己的有损格式(例如 JPEG)面临的挑战；这里几乎需要 PNG(我是否提到过，更高级的(？)用户也可以提取解码内容的代码)。

视频加密(EncryptedMediaExtensions API)

另一种方法是将图像作为受 DRM 保护的视频流(每个部分可以是一帧)提供。这可能在屏幕抓取器的情况下有一些影响，具体取决于操作系统/硬件支持等，但不要押注它(即使 browser support DRM )...

如果没有 DRM，只需获取视频并使用 ffmpeg 等工具提取每个帧即可。

水印

至少在库存照片领域，一种广泛采用的解决方案是为每个预览和图 block 添加水印。这将提升游戏水平，并迫使有决心的用户启动 Photoshop 或类似的工具，并花费比认为有趣的时间更多的时间来删除它们；结果可变。

这可能适合也可能不适合您的情况。

值(value)？

就我个人而言，我不会花时间尝试这样做。为此付出的努力很快就会得到解决。

根据目的，在图 block /部件上加水印(在源头)可能是更有效的解决方案。