html2canvas 不渲染 svg图表线

编程问答 2022-10-24

问题描述

我正在使用 chartist 截取包含图表线的页面的屏幕截图并将其保存到服务器，页面显示正确但图表未呈现。我在发布我的问题之前做了一些研究，并了解到 html2canvas 不适用于 svg，我应该使用 canvg 将 svg 标签转换为 img 然后截取我的屏幕截图，但没有一个答案对我有用。

我正在使用的代码：

function exportAndSaveCanvas()  {

                    html2canvas($("#captures"),{ 
                        allowTaint: true,background:'#fff',onrendered: function(canvas) {         
                    var imgData = canvas.toDataURL('image/jpeg');  

                    var code_firme = $("input[name=code_firme]").val();
                    var id_user = $("input[name=id_user]").val();
                    var page = '1';

                    var url = "{{path('uploadPdfImages')}}";
                        $.ajax({ 
                            type: "POST",url: url,dataType: 'text',data: {
                                base64data : imgData
                            }
                        });     
                    }
                    });
                }

我在图表创建后调用此操作：

chart.on('created',function(data){
         setTimeout(exportAndSaveCanvas(),13000);
         });

html 视图：

html view

svg tag

结果：

screenshot view

有没有人成功地将 Chartist 图表线转换为图像？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvghtml2canvassvgsvgsvg