[英]Convert SVG dataUrl to base64
I'm using a plugin (dom-to-image) to generate a SVG content from a div.我正在使用插件(dom-to-image)从 div 生成 SVG 内容。 It returns me a dataURL like this:
它返回一个像这样的 dataURL:
data image/xml, charset utf-8, <svg...
If a put this on a <img src
the image is shown to normally.如果将它放在
<img src
,图像将正常显示。
The intent is to grab this dataURL, convert it to base64 so I can save it as an image.png on a mobile app.目的是获取此 dataURL,将其转换为 base64,以便我可以将其保存为移动应用程序上的 image.png。
Is it possible?有可能吗?
I tryied this solution https://stackoverflow.com/a/28450879/1691609 But coudn't get to work.我尝试了这个解决方案https://stackoverflow.com/a/28450879/1691609但无法开始工作。 The console fire an error about the dataUrl
控制台触发有关 dataUrl 的错误
TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.
类型错误:无法在“XMLSerializer”上执行“serializeToString”:参数 1 不是“节点”类型。
==== UPDATE :: PROBLEM EXPLANATION/HISTORY ==== ==== 更新 :: 问题说明/历史 ====
I'm using Ionic Framework, so my project is an mobile app.我正在使用 Ionic 框架,所以我的项目是一个移动应用程序。 The dom-to-image is already working cause right now, its rendering a PNG through toPng function.
dom-to-image 现在已经开始工作了,它通过toPng函数渲染了一个 PNG。 The problem is the raster PNG is a blurry.
问题是光栅PNG是模糊的。
So I thought: Maybe the SVG will have better quality.所以我想:也许 SVG 会有更好的质量。 And it IS!!
它是!! Its 100% perfect, actually.
实际上,它是 100% 完美的。
On Ionic, I'm using 2 step procedure to save the image.在 Ionic 上,我使用两步程序来保存图像。 After get the PNG generated by the dom-to-img(base64) dataURL, I convert it to a Blob and then save into device.
得到dom-to-img(base64) dataURL生成的PNG后,我将其转换为Blob,然后保存到设备中。 This is working, but the final result, as I said, is blurry.
这是有效的,但正如我所说,最终结果是模糊的。
Then with SVG maybe it will be more "high quality" per say.然后使用 SVG 也许它会更“高质量”。
So, in order to do "minimal" change on a process that s already working :DI just need to convert an SVG into base64 dataURL....因此,为了对已经在工作的进程进行“最小”更改:DI 只需要将 SVG 转换为 base64 dataURL ....
Or, as some of you explained to me, into something else, like canvas... I don't know any much :/或者,正如你们中的一些人向我解释的那样,进入其他东西,比如画布......我不太了解:/
=== ===
Sorry for the long post, and I really, really thank your help guys!!很抱歉发表这么长的帖子,我真的非常感谢你们的帮助!!
EDIT COUPLE OF YARS LATER
稍后编辑YARS
- Use JS fiddle for a working example: https://jsfiddle.net/msb42ojx/
使用 JS 小提琴作为一个工作示例: https : //jsfiddle.net/msb42ojx/
- Note, if you don't own DOM content (images), and those images don't have CORS enabled for everyone (Access-Control-Allow-Origin header), canvas cant render those images
请注意,如果您没有 DOM 内容(图像),并且这些图像没有为所有人启用 CORS(Access-Control-Allow-Origin 标头),则画布无法渲染这些图像
I'm not trying to find out why is your case not working, here is how I did when I had something similar to do:我不是想找出为什么你的案例不起作用,这是我在做类似事情时的做法:
by the way you can resize the image to a standard format顺便说一下,您可以将图像大小调整为标准格式
document.getElementById('mydownload').onclick= function(){ var wrapper = document.getElementById('wrapper'); //dom to image domtoimage.toSvg(wrapper).then(function (svgDataUrl) { //download function downloadPNGFromAnyImageSrc(svgDataUrl); }); } function downloadPNGFromAnyImageSrc(src) { //recreate the image with src recieved var img = new Image; //when image loaded (to know width and height) img.onload = function(){ //drow image inside a canvas var canvas = convertImageToCanvas(img); //get image/png from convas var pngImage = convertCanvasToImage(canvas); //download var anchor = document.createElement('a'); anchor.setAttribute('href', pngImage.src); anchor.setAttribute('download', 'image.png'); anchor.click(); }; img.src = src; // Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; } // Converts canvas to an image function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } }
#wrapper{ background: red; color: blue; }
<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script> <button id='mydownload'>Download DomToImage</button> <div id="wrapper"> <img src="http://i.imgur.com/6GvKdxY.jpg"/> <div> DUDE IS WORKING</div> <img src="http://i.imgur.com/6GvKdxY.jpg"/> </div>
I translated @SilentTremor's solution into React/JS-Class:我将@SilentTremor 的解决方案翻译成 React/JS-Class:
class SVGToPNG {
static convert = function (src) {
var img = new Image();
img.onload = function () {
var canvas = SVGToPNG.#convertImageToCanvas(img);
var pngImage = SVGToPNG.#convertCanvasToImage(canvas);
var anchor = document.createElement("a");
anchor.setAttribute("href", pngImage.src);
anchor.setAttribute("download", "image.png");
anchor.click();
};
img.src = src;
};
static #convertImageToCanvas = function (image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
};
static #convertCanvasToImage = function (canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
};
}
export default SVGToPNG;
Usage:用法:
let dataUrl = someCanvas.toDataURL("image/svg+xml");
SVGToPNG.convert(dataUrl);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.