FileSaver.js Speichern unter Typ ist falsch

Question

Ich arbeite an einem Projekt, das Electron verwendet, um eine Webanwendung auf Desktop-App zu wickeln.

In diesem Projekt verwende ich FileSaver.js, um Canvas-Inhalte nach PNG/JPG/PDF zu exportieren.

1. Leinwand wird in base64 Bild gedreht
2. base64 Bild wird in Blob gedreht
3. Blob-Datei gespeichert wird FileSaver.js

Hier verwenden ist, wie es aussieht, wenn Speichern-Dialog erscheint:

So sollte es wie normal sa aussehen ve als (PNG-Datei):

Dies ist wichtig, weil, wenn der Benutzer am Ende des Dateinamen einfügen .png vergisst, kann die Datei nicht normal geöffnet werden.

Wie kann ich dieses Problem lösen?

Vielen Dank.

Answer 1

Ich würde vorschlagen, mit dem electron-canvas-to-buffer Paket und abhängig von den Benutzer Export-Option, erstellen Sie zwei Methoden und verwenden Sie Elektronen Dialog filter, um entsprechend zu speichern.

Für das pdf habe ich jspdf Paket verwendet. Dies speichert die Datei als den von Ihnen angegebenen Dateinamen. Auch habe ich einen Ausschnitt hinzugefügt, um den Leinwandhintergrund weiß zu malen, um schwarze Hintergründe zu vermeiden.

Hier ist ein einfaches Beispiel

var canvasBuffer = require('electron-canvas-to-buffer'); 
var fs = require('fs'); 
var jsPDF = require('jspdf'); 

// your canvas drawing 
var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
// painting the canvas white to prevent black background 
context.clearRect(0, 0, canvas.width, canvas.height); 
context.fillStyle = '#fff'; 
context.fillRect(0, 0, canvas.width, canvas.height); 
// drawing 
context.fillStyle = 'blue'; 
context.fillRect(0, 0, 50, 50); 
context.fillStyle = 'red'; 
context.fillRect(50, 10, 30, 20); 


// PNG 
function savePNG() { 
    var buffer = canvasBuffer(canvas, 'image/png'); 
    dialog.showSaveDialog({ 
     filters: [{ 
      name: 'png', 
      extensions: ['png'] 
     }] 
    }, function (fileName) { 
     if (fileName === undefined) return; 
     fs.writeFile(fileName, buffer, function (err) {}); 
    }); 
} 
// JPG 
function saveJPG() { 
    var buffer = canvasBuffer(canvas, 'image/jpg'); 
    dialog.showSaveDialog(
    { 
     filters: [ 
     { 
      name: 'jpg', 
      extensions: ['jpg'], 
     }, 
     ], 
    }, 
    (fileName) => { 
     if (fileName === undefined) return; 
     fs.writeFile(fileName, buffer, (err) => {}); 
    }, 
); 
} 
// PDF 
function savePDF() { 
    // only jpeg is supported by jsPDF 
    let imgData = canvas.toDataURL('image/jpeg', 1.0); 
    let pdf = new jsPDF(); 
    pdf.addImage(imgData, 'JPEG', 0, 0); 
    pdf.save('test.pdf'); 
}