fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-30 03:08:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add the File > Export dialog and PNG/JPG downloading (#629)

Browse Source 
* Add export dialog

* Code review changes

* More code review feedback

* Fix compilation on stable Rust

* Fixes to problems

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-05-08 23:35:22 -07:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent 79d40fa451
commit 1481b03c85
19 changed files with 445 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/state/documents.ts
+36 -2
View File
@@ -1,9 +1,9 @@
/* eslint-disable max-classes-per-file */
import { reactive, readonly } from "vue";
import { TriggerFileDownload, FrontendDocumentDetails, TriggerFileUpload, UpdateActiveDocument, UpdateOpenDocumentsList } from "@/dispatcher/js-messages";
import { TriggerFileDownload, TriggerRasterDownload, FrontendDocumentDetails, TriggerFileUpload, UpdateActiveDocument, UpdateOpenDocumentsList } from "@/dispatcher/js-messages";
import { EditorState } from "@/state/wasm-loader";
import { download, upload } from "@/utilities/files";
import { download, downloadBlob, upload } from "@/utilities/files";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createDocumentsState(editor: EditorState) {
@@ -34,6 +34,40 @@ export function createDocumentsState(editor: EditorState) {
download(triggerFileDownload.name, triggerFileDownload.document);
});
editor.dispatcher.subscribeJsMessage(TriggerRasterDownload, (triggerRasterDownload) => {
// A canvas to render our svg to in order to get a raster image
// https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser
const canvas = document.createElement("canvas");
canvas.width = triggerRasterDownload.size.x;
canvas.height = triggerRasterDownload.size.y;
const ctx = canvas.getContext("2d");
if (!ctx) return;
// Fill the canvas with white if jpeg (does not support transparency and defaults to black)
if (triggerRasterDownload.mime.endsWith("jpg")) {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, triggerRasterDownload.size.x, triggerRasterDownload.size.y);
}
// Create a blob url for our svg
const img = new Image();
const svgBlob = new Blob([triggerRasterDownload.document], { type: "image/svg+xml;charset=utf-8" });
const url = URL.createObjectURL(svgBlob);
img.onload = (): void => {
// Draw our svg to the canvas
ctx?.drawImage(img, 0, 0, triggerRasterDownload.size.x, triggerRasterDownload.size.y);
// Convert the canvas to an image of the correct mime
const imgURI = canvas.toDataURL(triggerRasterDownload.mime);
// Download our canvas
downloadBlob(imgURI, triggerRasterDownload.name);
// Cleanup resources
URL.revokeObjectURL(url);
};
img.src = url;
});
// TODO(mfish33): Replace with initialization system Issue:#524
// Get the initial documents
editor.instance.get_open_documents_list();