「AntV」x6 图片导出问题汇总

🖼️ | 本地图片导出后不显示？

先看看官方的导出文档：图片导出

由于业务需要，需要把画布上的节点保存成图片供其它模块展示，如果你的后端返回的数据格式是前端想要的，那么大不必搞图片的形式，直接把官网的快速上手代码拿过来循环一下就好了……，这里就拿toPng的方法来讲解

问题梳理

• 调用toPng拿到画布的base64数据
• 把base64的数据传给后端
• 后端把base64的数据转存后生成可访问的图片地址再返回给前端
• 前端开始展示

然而事情却没有这么简单，第一步就遇到了一堆的坑，由于官网上导出的都是它内置的节点，所以导出都没啥问题，但是我使用的是html节点，导出的时候，我节点的图片就死活导不出来，而且导出的样式也是乱的(样式错乱问题)

解决方案

一句话：图片必须得是base64格式的导出才会有图片，不然无法导出节点的图片

1. 自定义html节点中把图片转换成base格式的

需要调用 imageToDataUri把图片地址转成base64的数据，这个方法我也是摸索了好久才找到的，官方文档完全没有提及这个方法，如果需要查看其它方法，请打印 DataUri这个对象

DataUri.imageToDataUri('/images/operator/datasouce.png',
  function (nu, url) {
   
    // 第一个参数无效，用的只是第二个参数，