javascript - 使用 Charts.js 在 Canvas 旁边显示 Base64 图像

Question

我使用的 Charts.js 可以选择添加包含 Canvas 的 Base64 图像的属性，如下所示:

animation: {
    onComplete: function(animation){
        document.querySelector('#myChart').setAttribute('href', this.toBase64Image());
    }
},

这是完整的工作 fiddle :https://jsfiddle.net/0on3f7t7/

当您检查 Canvas 时，您可以看到包含图像的 href 属性，这样就可以了。但我需要在 Canvas 下方显示图像。所以，是的，屏幕上会有两个图表， Canvas 版本和图像版本。

无论如何我都找不到这个问题的答案，并且文档也没有提供任何线索。

Answer 1

您需要添加 <img>元素到您的页面，然后设置 src <img> 的属性元素到 this.toBase64Image() 的输出

请参阅以下 fiddle :

https://jsfiddle.net/wveepa7c/

onComplete: function(animation){
  // #myImage is an img element
  document.querySelector('#myImage').setAttribute('src', this.toBase64Image());
}