使用.toDataUrl（）将Chart.js画布图转换为图像会生成空白图像 [英] Converting Chart.js canvas chart to image using .toDataUrl() results in blank image

问题描述

我正在使用Chart.js。我正试图通过获取基本64字符串将图表转换为图像。该教程（ http://www.chartjs.org/docs/ ）专门提供了一整行主题：
$ b

I am using Chart.js. I am trying to convert the chart to an image by getting a base 64 string. The tutorial (http://www.chartjs.org/docs/) devotes an entire 1 line on the topic:

canvas元素还允许将内容保存为基本64
字符串，从而可以将图表另存为image

The canvas element also allows for saving the contents as a base 64 string, allowing saving the chart as an image.

一个 canvas 元素的方法是 toDataURL ，它返回图像的base64字符串。但是，当我这样做时，它呈现的图像只是一个具有图表维度的透明矩形，并且不包含图表内容。

A canvas element has the method of toDataURL, which returns a base64 string of the image. However, when I do that, the image it renders is just a transparent rectangle with the dimensions of the chart, and it does not include the chart contents.

这是一个小提琴： http://jsfiddle.net/ KSgV7 /

小提琴中的图像以黑色边框为样式，所以您可以看到它们应该在哪里，因为它们似乎只是一个很大的透明块。

The "images" in the fiddle are styled with a black border, so you can see where they are supposed to be, since they seem to just be a big transparent block.

有没有人成功将Chart.js图表​​转换为图像？

Has anyone successfully converted a Chart.js chart to an image?

推荐答案

图表似乎是异步的，所以你可能需要在动画结束时提供回调，否则画布将为空。

The chart seem to be async so you will probably need to provide a callback when the animation has finished or else the canvas will be empty.

var options = {
    bezierCurve : false,
    onAnimationComplete: done  /// calls function done() {} at end
};

这篇关于使用.toDataUrl（）将Chart.js画布图转换为图像会生成空白图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！