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

问题描述

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

具体来说，我正在尝试创建一个包含图表的 HTML 电子邮件模板，并希望用户能够选择所有 > 复制/粘贴到他们的电子邮件客户端，而不是复制/粘贴、导出图像，然后找到一种将其插入电子邮件的方法.

我发现了这个:将 HTML Canvas 捕获为 gif/jpg/png/pdf?，但代码似乎没有将图像渲染到文档中.

解决方案

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

http://image.vida.io/

您的图表/可视化需要可以从外部访问.您可以将凭据传递给 URL.

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

然后就可以显示带有img标签的图片了:

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

它可以跨浏览器工作.

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.

Specifically, I'm trying to create an HTML email template that includes the chart, and want 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.

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.

解决方案

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

Then you can display image with img tag:

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

It works across browser.

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