fabric.js 可以将光栅图形解析为“真实”的 svg 吗？

Question

我对 fabric.js 有疑问/问题 - 在我的代码中，用户可以上传图片，使用过滤器可以将其转换为黑白图像。当我用 canvas.toSVG() 导出图片时；它导出 svg 图像，但它不是真正的矢量图形 - 放大时会丢失质量。

function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
    var img = new Image();
    img.onload = function () {
        var imgInstance = new fabric.Image(img, {
            scaleX: 0.7,
            scaleY: 0.7

        })
        canvas.add(imgInstance);
    }
    img.src = event.target.result;     
} reader.readAsDataURL(e.target.files[0]);}



$('saveBtn').onclick = function() {
var filedata= canvas.toSVG(); // the SVG file is now in filedata
var locfile = new Blob([filedata], {type: "image/svg+xml;charset=utf-8"});
var locfilesrc = URL.createObjectURL(locfile);//mylocfile);
var dwn = document.getElementById('dwn');
dwn.innerHTML = "<a href=" + locfilesrc + " download='mysvg.svg'>Download</a>";}

我做错了什么？

Answer 1

没有简单的方法可以将光栅图形“解析”为矢量图像。矢量图形包含有关如何绘制图像的信息，而光栅图像仅包含有关图像在给定大小和分辨率下显示的像素数据。这对于许多目的来说已经足够了，但这意味着虽然从矢量转到光栅很容易（只需执行指令），但从光栅转到矢量并不容易。

可以“追踪”光栅图像的边缘以获得可以近似光栅的矢量：换句话说，一组矢量指令，对于特定的分辨率和深度，产生与原始光栅（或非常相似的东西）相同的图像。 但不能保证这些实际上以任何方式对应于原始向量（如果有任何原始向量的话）。实际上，通常没有对应关系，除非您的跟踪算法非常专业：例如，跟踪字体的图像以制作该字体的矢量副本。因为它们不对应，所以无法保证图像会按照您想要的方式放大：它会缩放，但可能会以奇怪的方式放大。

可以在 JavaScript 中实现跟踪算法，通过将图像绘制到 <canvas> 元素中，使用 getImageData() 从中获取像素信息，并对像素信息执行操作。但是，这样做超出了这个问题的范围。