[英]how can convert a base64 svg image to base64 image png
我有一个代码,可以将图表转换为svg。 但我需要输出格式为PNG图片。 svgString2Image
是返回编码的base64 svg的函数。 我该怎么做? 非常感谢你。
function svgString2Image( svgString, width, height, format, callback ) {
//console.log("svgString",svgString)
format ? format : 'png';
var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
var image = new Image();
image.onload = function() {
context.clearRect ( 0, 0, width, height );
context.drawImage(image, 0, 0, width, height);
canvas.toBlob( function(blob) {
var filesize = Math.round( blob.length/1024 ) + ' KB';
if ( callback ) callback( blob, filesize );
});
};
///****************************
document.getElementById('my_image').src=imgsrc;
return image.src = imgsrc;
}
正如@ guest271314和我在注释中所述,当不需要 base64字符串时,请使用canvas.toDataURL canvas.toBlob 。 而且image.onload是异步的,因此无法“返回” base64 png字符串。 您必须使用回调(或Promise,如@ guest271314所述)。
function svgString2Image(svgString, width, height, format, callback) {
// set default for format parameter
format = format ? format : 'png';
// SVG data URL from SVG string
var svgData = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
// create canvas in memory(not in DOM)
var canvas = document.createElement('canvas');
// get canvas context for drawing on canvas
var context = canvas.getContext('2d');
// set canvas size
canvas.width = width;
canvas.height = height;
// create image in memory(not in DOM)
var image = new Image();
// later when image loads run this
image.onload = function () { // async (happens later)
// clear canvas
context.clearRect(0, 0, width, height);
// draw image with SVG data to canvas
context.drawImage(image, 0, 0, width, height);
// snapshot canvas as png
var pngData = canvas.toDataURL('image/' + format);
// pass png data URL to callback
callback(pngData);
}; // end async
// start loading SVG data into in memory image
image.src = svgData;
}
// call svgString2Image function
svgString2Image(svgString, 800, 600, 'png', /* callback that gets png data URL passed to it */function (pngData) {
// pngData is base64 png string
});
最后一个参数没有函数传递给svgString2Image
。 将函数传递给svgString2Image
,该函数需要blob
和filesize
参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.