我使用的是chart.js，它可以选择添加包含画布的base64图像的属性，如下所示：
animation: {
onComplete: function(animation){
document.querySelector('#myChart').setAttribute('href', this.toBase64Image());
}
},
以下是完整的工作小提琴：https://jsfiddle.net/0on3f7t7/
检查画布时，您可以看到包含图像的href属性，因此可以正常工作。但相反，我需要在画布下方显示图像。所以，是的，屏幕上会有两个图表，即画布版和图像版。
无论如何，我无法找到这个问题的答案，文档也没有提供任何线索。
答案 0 :(得分：3)
您需要在页面中添加<img>元素，然后将src元素的<img>属性设置为this.toBase64Image()的输出
请参阅以下小提琴：
https://jsfiddle.net/wveepa7c/
onComplete: function(animation){
// #myImage is an img element
document.querySelector('#myImage').setAttribute('src', this.toBase64Image());
}
答案 1 :(得分：1)
onComplete在jsfiddle被调用至少两次。您可以在undefined定义一个onComplete变量，检查是否定义了变量以防止<img>被追加到document两次，如果未定义变量，则创建{{ 1}}元素，使用<img>使用第一个参数.insertAdjacentHTML()链接到ctx，使用"afterend"元素的第二个参数.outerHTML
<img>
var img;