Javascript FileSaver.js另存为类型不正确
我正在做一个项目,使用Electron将web应用程序包装到桌面应用程序 在这个项目中,我使用FileSaver.js将画布内容导出为png/jpg/pdfJavascript FileSaver.js另存为类型不正确,javascript,electron,save-as,filesaver.js,Javascript,Electron,Save As,Filesaver.js,我正在做一个项目,使用Electron将web应用程序包装到桌面应用程序 在这个项目中,我使用FileSaver.js将画布内容导出为png/jpg/pdf 画布将转换为base64图像 base64图像已转换为blob blob文件使用FileSaver.js保存 下面是“保存”对话框出现时的情况: 这是它作为普通另存为(png文件)的外观: 这很重要,因为如果用户忘记在文件名末尾插入.png,文件将无法正常打开 我怎样才能解决这个问题 非常感谢。我建议使用该软件包,根据用户的导出选择,创
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');
}
谢谢你@kemotoe。png很好用。jpg仅显示为黑色。你知道如何使用pdf文件吗?@HoangTrinh更新了我的答案。