如何将iframe的图像保存在HTML5画布下？ [英] How to save image of iframe underneath HTML5 canvas?

问题描述

我正尝试在我的画布上调用我可以绘制或添加注释的网页。

I am trying to call a webpage on my canvas on which I can draw or add notes. Now I want to take a screenshot where the drawing is saved with the webpage as background.

我在画布后面的iframe中调用了一个url（使用z-index）
我只能保存我在画布上绘制的图像，而不是我调用的网页。

I called a url in iframe behind the canvas (using z-index) I can save only the image which I draw on canvas and not the webpage which I called.

请帮助我如何才能使其工作。
有没有什么办法可以在我的画布中调用一个url？

Please help how I can get it to work. Is there any way I can call a url within my canvas?

推荐答案

这已经在这篇文章中得到了回答： 将HTML Canvas捕获为gif / jpg / png / pdf？ - 您可以保存画布，但渲染其他页面会成为安全漏洞。你可以做些什么 - 运行一个服务器端脚本，它在接收到一个URL时产生一个可下载的屏幕截图。

This was already answered in this post: Capture HTML Canvas as gif/jpg/png/pdf? - You can save the canvas, but rendering other pages would be a security hole. What you could do - run a server-side script that upon receiving an URL produces a downloadable screenshot image.

下面是直接来自Mozilla源代码的原理（Mozilla增加了一个 drawWindow 方法到canvas上下文）：

Here is the rationale coming directly from Mozilla source code (Mozilla adds a drawWindow method to canvas context):

// We can't allow web apps to call this until we fix at least the
// following potential security issues:
// -- rendering cross-domain IFRAMEs and then extracting the results
// -- rendering the user's theme and then extracting the results
// -- rendering native anonymous content (e.g., file input paths;
// scrollbars should be allowed)

这篇关于如何将iframe的图像保存在HTML5画布下？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！