我正在开发一个使用Electron将Web应用程序打包到桌面应用程序的项目。
在这个项目中,我使用FileSaver.js将画布内容导出到png / jpg / pdf。
答案 0 :(得分:1)
我建议使用electron-canvas-to-buffer
包,并根据用户导出选项,创建两个方法并使用电子对话框filter
进行相应保存。
对于我使用jspdf
包的pdf。这会将文件保存为您指定的任何文件名。我还添加了一个片段,将画布背景画成白色以避免黑色背景。
这是一个简单的例子
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');
}