tl; dr：如何使用服务工人来缓存HTML2Canvas处理的图像？为什么不使用现有的服务工作人员缓存？
我正在写一个也可以离线使用的PWA。这是用于创建自定义图像网格的应用程序。图像来自外部API，我使用Wookbox/ServiceWorker将这些请求缓存到API。
离线功能效果很好，但是当使用 HTML2Canvas 以创建图像网格的缩略图时，它仅在线工作。 HTML2Canvas似乎创建了页面的iframe-copy，以创建屏幕截图。 对于所有图像 在iframe/屏幕截图新请求中都完成了，并且未使用ServiceWorker的现有缓存。
此屏幕截图显示了打开我的应用程序的网络流量，并通过API的2个图像的网格网格：
- 请求（1）是该应用程序加载的图像 - 来自ServiceWorker
- 请求（2-4）是从HTML2Canvas加载图像的三个款项，其中最后一个使用ServiceWorker成功了，但是在屏幕快照上看不到图像。
欢迎使用现有服务工人缓存或其他一个使HTML2Canvas可用脱机的想法。
我正在使用HTML2Canvas 1.4.1。
TL;DR: How can images processed by html2canvas be cached using a ServiceWorker? Why the existing ServiceWorker cache isn't used?
I'm writing a PWA that also can be used offline. It's an application that is used for creating grids of custom images. Images are coming from an external API and I cache these requests to the API using Workbox/ServiceWorker.
Offline capabilities are working great, but when using html2canvas in order to create thumbnails of the image grids, it's only working online. html2canvas seems to create an iframe-copy of the page in order to create the screenshots. And for all images in the iframe/screenshot new requests are done, and the existing cache from the ServiceWorker isn't used.
This screenshot shows the network traffic for opening my app with a grid of 2 images from the API:
- request (1) is are the images loaded by the app - coming from ServiceWorker
- requests (2-4) are three attemts of loading the images from html2canvas, where the last one succeeds using the ServiceWorker, however the images are not visible on the screenshot.
Any ideas for making html2canvas usable offline using either the existing ServiceWorker cache or another one are welcome.
I'm using html2canvas 1.4.1.
发布评论
评论（1）
我从未使用过html2canvas，所以我可能错了，但是如果它创建
＆lt; iframe＆gt;，请记住，iframe会建立新的浏览上下文，以及浏览上下文之间的通信出于安全原因受到严格限制。HTML2Canvas创建的iFrame应该与您的PWA相同的起源，因此也许您可以尝试使用让这些浏览上下文（即iFrame和服务工作者）之间进行交流。
另请参见：
I have never used html2canvas, so I might be wrong, but if it is creating an
<iframe>, then keep in mind that an iframe establishes a new browsing context, and that the communication between browsing contexts is severely constrained for security reasons.The iframe created by html2canvas should be on the same origin of your PWA, so maybe you could try using the BroadcastChannel API to let these browsing contexts (i.e. the iframe and the service worker) communicate between each other.
See also: