我正在使用插件(dom-to-image)从div生成SVG内容 . 它返回一个dataURL,如下所示:
data image/xml, charset utf-8, <svg...
如果把它放在 <img src
上,图像会正常显示 .
目的是获取此dataURL,将其转换为base64,以便将其保存为移动应用程序上的image.png .
可能吗?
我尝试了这个解决方案https://stackoverflow.com/a/28450879/1691609但是不能开始工作 . 控制台触发有关dataUrl的错误
TypeError:无法在'XMLSerializer'上执行'serializeToString':参数1不是'Node'类型 .
====更新::问题解释/历史====
我正在使用Ionic Framework,所以我的项目是一个移动应用程序 . dom-to-image现在是 already working 因为它通过 toPng 函数渲染PNG . 问题是光栅PNG模糊不清 .
所以我想:也许SVG会有更好的质量 . 它是!!实际上它100%完美 .
在Ionic上,我使用两步程序来保存图像 . 获取由dom-to-img(base64)dataURL生成的PNG后,我将其转换为Blob,然后保存到设备中 . 这是有效的,但正如我所说,最终结果是模糊的 .
然后使用SVG可能会更加“高质量” .
因此,为了对已经运行的进程进行“最小”更改:D我只需要将SVG转换为base64 dataURL ....
或者,正如你们中的一些人向我解释的那样,还有其他的东西,比如画布......我不知道多少:/
===
对不起,很长的帖子,我真的非常感谢你的帮助!
1 回答
我不是要弄清楚为什么你的情况不起作用,这就是我做类似事情时的表现:
获取图像质量(dom-to-image结果)
设置内部带有该图像的画布(使用图像源)
从画布上下载任何你喜欢的图像:png,jpeg无论如何
顺便说一句,您可以将图像调整为标准格式