Impossible d'enregistrer le canevas en tant qu'image sur le navigateur Edge

Question

J'utilise fabric js pour mon application Web. Pour enregistrer du canvas HTML5 en tant qu'image en utilisant js fabric, j'ai trouvé le code suivant qui fonctionne dans le navigateur chrome et firefox. Mais quand je cours le même code dans le bord de Microsoft, le navigateur ouvre juste une nouvelle fenêtre vide sans n'importe quelle image là-dessus.

$(".save").click(function() { 
    canvas.deactivateAll().renderAll(); 
    window.open(canvas.toDataURL('png')); 
}); 

Cependant, j'ai également testé de nombreux projets de violon qui montre comment convertir le canevas en image. Ces violons fonctionnent sur le chrome mais pas sur le bord. Un exemple violon est here

Answer 1

Si vous utilisez FileSaver.js, il sera téléchargé sur Edge. Pour utiliser FileSaver.js, vous devez convertir les données de base64 en données de blob. Pour ce faire, s'il vous plaît vérifier this post on StackOverflow

Voici une mise à jour fiddle

Vous devez inclure FileSaver.js dans votre projet et votre bouton de sauvegarde aura le code suivant:

$("#canvas2png").click(function(){ 
    canvas.isDrawingMode = false; 

    if(!window.localStorage){alert("This function is not supported by your browser."); return;} 

    var blob = new Blob([b64toBlob(canvas.toDataURL('png').replace(/^data:image\/(png|jpg);base64,/, ""),"image/png")], {type: "image/png"}); 
     saveAs(blob, "testfile1.png"); 
}); 

Alternative, solution rapide et de la saleté est d'écrire des données html dans un nouvel onglet, et faites un clic droit sur l'image et enregistrez-le. Cette solution n'est pas requise pour les plugins ou les bibliothèques.

Votre économie va tout simplement changer pour:

$("#canvas2png").click(function(){ 
    canvas.isDrawingMode = false; 

    if(!window.localStorage){alert("This function is not supported by your browser."); return;} 

     var html="<img src='"+canvas.toDataURL()+"' alt='canvas image'/>"; 
     var newTab=window.open(); 
     newTab.document.write(html); 
}); 

Answer 2

Vérifiez le violon modifié:

http://jsfiddle.net/9hrcp/164/

document.getElementById('test').src = canvas.toDataURL('image/png'); 

i ajouté une balise d'image et et définissez l'attribut src à l'dataURL à l'image et il charge très bien. Donc, edge génère un png correct, refuse de le charger comme une redirection dataUrl. Peut être une fonctionnalité et non un bug.