Javascript 如何将base64 svg图像转换为base64图像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;

}

---

在最后一个参数中，没有函数传递给

svgString2Image

。将函数传递给

svgString2Image

，该函数需要

blob

和

filesize

参数。

最后一个参数时，没有函数传递给

svgString2Image

。将函数传递给

svgString2Image

，该函数需要

blob

和

filesize

参数。

正如@guest271314和我在注释中所述，当不需要base64字符串时使用。此外，image.onload是异步的，因此无法“返回”base64 png字符串。您必须使用callback（或@guest271314所述）

---

正如@guest271314和我在注释中所述，在不需要base64字符串时使用。此外，image.onload是异步的，因此无法“返回”base64 png字符串。您必须使用callback（或@guest271314所述）

---

---

使用回调。@meager链接的问题和答案如何在当前问题的代码处解决问题？

格式从不使用，但canvas.toBlob默认为“image/png”。如果要指定格式add
“image/”+format
作为canvas.toBlob的第二个参数。@WilliamLohan我不确定你在说什么，如果您想要一个base64而不是一个文件，如何修复它以生成pngUse的base64字符串？使用回调。@meager链接的问题和答案如何解决当前问题的代码问题？
从未使用过格式，但canvas.toBlob默认为“image/png”。如果您想指定格式add
'image/'+format
作为canvas.toBlob的第二个参数。@WilliamLohan我不确定您在说什么，如果您想要的是base64而不是文件，我如何修复它以生成pngUse的base64字符串？您能帮我吗？我只需要在base64 PNG中的图像中返回结果您所说的返回是什么意思？你编写了函数；
回调的目的是什么<代码>svgString2Image（svgString，800600，'png'，函数（blob，filesize）{//do stuff with blob and filesize}）
表示返回png格式的字符串base64。我对那部分代码没有任何意义。我有它，以防这有助于生成png中的字符串。为什么使用
canvas.toBlob（）
预期结果是
数据URI
？不可能从异步函数中
返回
，尽管可以使用
Promise
从函数调用和
返回
Promise
对象。然后（）？我只需要在base64 PNG中的图像中返回结果您所说的返回是什么意思？你编写了函数；
回调的目的是什么<代码>svgString2Image（svgString，800600，'png'，函数（blob，filesize）{//do stuff with blob and filesize}）
表示返回png格式的字符串base64。我对那部分代码没有任何意义。我有它，以防这有助于生成png中的字符串。为什么使用
canvas.toBlob（）
预期结果是
数据URI
？虽然您可以使用
Promise
从函数调用中返回
Promise
对象，并使用
返回
Promise
对象，但不可能从异步函数中返回
。然后（）
获取已实现的
Promise
值，谢谢！我是否可以在不使用回调的情况下获取base64字符串，例如：
var png=svgString2Image（svgString，800600，'png）
“另外image.onload是异步的，因此无法“返回”base64 png字符串。您必须使用回调（或@guest271314所述的承诺）。”-从回答中，请阅读OK，我想知道是否还有其他方法。非常感谢你。据我所知不是这样。我知道的唯一方法是如何操作，将图像绘制到画布并在画布上调用toSomthing（）（在本例中为toDataURL）。在将图像绘制到画布（即Image.onload函数）之前，必须等待图像加载到原始数据（本例中为SVG数据）。这使整个过程异步。谢谢！我是否可以在不使用回调的情况下获取base64字符串，例如：
var png=svgString2Image（svgString，800600，'png）
“另外image.onload是异步的，因此无法“返回”base64 png字符串。您必须使用回调（或@guest271314所述的承诺）。”-从回答中，请阅读OK，我想知道是否还有其他方法。非常感谢你。据我所知不是这样。我知道的唯一方法是如何操作，将图像绘制到画布并在画布上调用toSomthing（）（在本例中为toDataURL）。在将图像绘制到画布（即Image.onload函数）之前，必须等待图像加载到原始数据（本例中为SVG数据）。这使得整个过程是异步的。
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
});