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()从中抓取像素信息，然后对像素执行操作信息即可。但是，这样做超出了这个问题的范围。

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

1 个答案: