Wie kann ich ein base64 svg Bild zu base64 image png konvertieren

Question

Ich habe einen Code, der ein Diagramm in Svg konvertiert. aber ich brauche das Ausgabeformat als PNG-Bild. svgString2Image ist die Funktion, die eine codierte base64 svg zurückgibt. Wie kann ich es tun? vielen Dank.

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; 

} 

http://plnkr.co/edit/lPhmuYywPCdjQrnwhQcH?p=preview

Answer 1

Da sowohl @ guest271314 und ich in den Kommentaren angegeben canvas.toDataURL verwenden, wenn Base64 Zeichenfolge nicht gewünscht ist, canvas.toBlob. Auch image.onload ist async, so dass es unmöglich ist, die base64 png-Zeichenfolge zurückzugeben. Sie müssen den Rückruf verwenden (oder Promise als @ guest271314 angegeben).

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 
}); 

Answer 2

keine Funktion svgString2Image zuletzt Argument übergeben wird. Übergeben Sie eine Funktion an svgString2Image, die blob und filesize Argumente erwartet.