vue2将iframe转换为图片

Question

业务需求 引入一个外部的网站 对该网站进行截图 ，使用html2canvas 和 dom-to-image 都截图是空白的，查找了问题原因 ，应该是浏览器安全策略限制。现在想实现该业务需求没有合适的解决方案

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

由于浏览器安全策略限制，无法直接将iframe转换为图片。但是，您可以尝试以下方法：

1. 使用服务器端渲染（SSR）技术，如Nuxt.js或Next.js，将外部网站的内容渲染到服务器上，然后将渲染后的HTML发送给客户端。这样，您可以在客户端使用html2canvas或dom-to-image对渲染后的HTML进行截图。

2. 如果您有权访问外部网站的源代码，可以将其嵌入到您的Vue项目中，然后使用html2canvas或dom-to-image对其进行截图。但请注意，这种方法可能会导致跨域问题，需要确保遵循CORS策略。

3. 使用第三方服务，如PhantomJS、Puppeteer等，这些服务可以在服务器端执行JavaScript代码并捕获网页截图。然后，您可以将这些截图作为图像资源嵌入到您的Vue项目中。这种方法可能需要额外的服务器资源和配置。

总之，由于浏览器安全策略的限制，直接将iframe转换为图片可能不是一个可行的解决方案。您需要寻找其他方法来实现您的需求。