node 版搭配 skia-canvas svg 报错

[kooriookami]

使用 node 启动服务，skia-canvas 会报错：Error: Invalid data URI header，看起来是不适配 svg 文件。

import { Leafer, Image, useCanvas, Platform } from '@leafer-ui/node';
import skia from 'skia-canvas';
import http from 'http';

useCanvas('skia', skia); // must

http.createServer(function (req, res) {
  const svg = `
<svg width="48" height="24" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M7.5 8.0H8.5V5.9L6.8 7.2L7.5 8.0ZM3 11.4L2.3 10.6L1.3 11.4L2.3 12.2L3 11.4ZM7.5 10.4H6.5V11.4H7.5V10.4ZM16.5 10.4V11.4H17.5V10.4H16.5ZM16.5 8.0L17.1 7.2L15.5 5.9V8.0H16.5ZM21 11.4L21.6 12.2L22.6 11.4L21.6 10.6L21 11.4ZM16.5 14.9H15.5V16.9L17.1 15.7L16.5 14.9ZM16.5 12.4H17.5V11.4H16.5V12.4ZM7.5 12.4V11.4H6.5V12.4H7.5ZM7.5 14.9L6.8 15.7L8.5 16.9V14.9H7.5ZM6.8 7.2L2.3 10.6L3.6 12.2L8.1 8.7L6.8 7.2ZM8.5 10.4V8.0H6.5V10.4H8.5ZM16.5 9.4H7.5V11.4H16.5V9.4ZM17.5 10.4V8.0H15.5V10.4H17.5ZM15.8 8.7L20.3 12.2L21.6 10.6L17.1 7.2L15.8 8.7ZM20.3 10.6L15.8 14.1L17.1 15.7L21.6 12.2L20.3 10.6ZM17.5 14.9V12.4H15.5V14.9H17.5ZM7.5 13.4H16.5V11.4H7.5V13.4ZM8.5 14.9V12.4H6.5V14.9H8.5ZM2.3 12.2L6.8 15.7L8.1 14.1L3.6 10.6L2.3 12.2Z" fill="white"/>
<path fill-rule="evenodd" d="M3 11.4L7.5 8.0V10.4H16.5V8.0L21 11.4L16.5 14.9V12.4H7.5V14.9L3 11.4Z" fill="black"/>
</g>
</svg>`;

  const leafer = new Leafer({ width: 800, height: 600 });

  const image = new Image({
    url: Platform.toURL(svg, 'svg'),
    draggable: true
  });

  leafer.add(image);

  leafer.export('png').then(function (result) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write(`<img src="${result.data}" />`);
    res.end();
  });

}).listen(3000, function () {
  console.log('\x1B[36m%s\x1B[0m', 'server is running at http://localhost:3000');
});

[leaferjs]

试试svg本地文件，好像之前有人渲染成功过

[kooriookami]

也是不行呢，一开始就是导入的本地文件，为了做demo简化了。web版是好的，node就不行了。

[leaferjs]

那可能就是skia-canvas不支持，找找node端svg转图片的库😂，结合一下

[kooriookami]

https://skia-canvas.org/api/image#loadimage

似乎是svg加载方式的区别，我放了一个绝对路径能显示。Base64的svg需要处理一下。