将Highcharts画布渲染为页面上的PNG [英] Render Highcharts canvas as a PNG on the page

问题描述

再次回到这个奇妙的井。

Back to this wonderful well again....

我使用HighCharts库来生成一些动态图表。但是，我想将HighCharts canvas元素渲染为PNG图像，以便用户可以将图表复制并粘贴到电子邮件等中，而无需使用导出功能。

I'm using the HighCharts library to generate some dynamic charts. However, I'd like to render the HighCharts canvas element as a PNG image, such that the user can copy and paste the chart into an email, etc. without having to use the exporting function.

具体来说，我试图创建一个包含图表的HTML电子邮件模板，无法让用户选择所有>复制/粘贴到他们的电子邮件客户端，而不是复制/粘贴，导出

Specifically, I'm trying to create an HTML email template that includes the chart, and wan't the user to be able to select all > copy/paste into their email client instead of copy/pasting, exporting the image, then finding a way to insert it in the email.

我发现这个：捕获HTML画布作为gif / jpg / png / pdf？，但是代码似乎不渲染图像到文档

I've found this: Capture HTML Canvas as gif/jpg/png/pdf?, but the code doesn't seem to render an image to the document.

非常感谢任何帮助。

推荐答案

基于PhantomJS的服务器端解决方案。您可以使用JSONP对image.vida.io进行跨域调用。

Here's a server side solution based on PhantomJS. You can use JSONP to make a cross domain call to image.vida.io.

http ：//image.vida.io/

您的图表/可视化需要从外部访问。您可以将凭证传送到网址。

Your chart/visualization need to be accessible from outside. You can pass credential to the URL.

http://image.vida.io/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width= 980& viewport_height = 900& delay = 5000& selector =％23canvas

然后您可以使用img标签显示图片：

Then you can display image with img tag:

<img src="data:image/png;base64, [base64 data]"/>

它适用于浏览器。

这篇关于将Highcharts画布渲染为页面上的PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！