diff --git a/niimblue/src/lib/ImageEditor.svelte b/niimblue/src/lib/ImageEditor.svelte index 1f9cd7b..06fac50 100644 --- a/niimblue/src/lib/ImageEditor.svelte +++ b/niimblue/src/lib/ImageEditor.svelte @@ -17,6 +17,7 @@ import BarcodeParamsPanel from "./BarcodeParamsControls.svelte"; import Dropdown from "bootstrap/js/dist/dropdown"; import { FileUtils } from "../utils/file_utils"; + import ZplImportButton from "./ZplImportButton.svelte"; let htmlCanvas: HTMLCanvasElement; let fabricCanvas: fabric.Canvas; @@ -110,6 +111,25 @@ ); }; + const zplImageReady = (img: Blob) => { + const reader = new FileReader(); + + reader.readAsDataURL(img); + reader.onload = (readerEvt: ProgressEvent) => { + if (readerEvt?.target?.result) { + fabric.Image.fromURL(readerEvt.target.result as string, (img: fabric.Image) => { + img.set({ left: 0, top: 0, snapAngle: 10 }); + img.scaleToHeight(labelProps.size.width - 1).scaleToHeight(labelProps.size.height - 1); + fabricCanvas.add(img); + }); + } + }; + + reader.onerror = (readerEvt: ProgressEvent) => { + console.error(readerEvt); + }; + }; + const onObjectPicked = (objectType: OjectType) => { ImageEditorUtils.addObject(fabricCanvas, objectType); }; @@ -245,9 +265,13 @@
- +
diff --git a/niimblue/src/lib/ZplImportButton.svelte b/niimblue/src/lib/ZplImportButton.svelte new file mode 100644 index 0000000..71c1070 --- /dev/null +++ b/niimblue/src/lib/ZplImportButton.svelte @@ -0,0 +1,54 @@ + + + diff --git a/niimblue/src/utils/file_utils.ts b/niimblue/src/utils/file_utils.ts index 19589cc..5a52853 100644 --- a/niimblue/src/utils/file_utils.ts +++ b/niimblue/src/utils/file_utils.ts @@ -18,7 +18,12 @@ export class FileUtils { URL.revokeObjectURL(link.href); } - /** Open file picker and return file contents */ + /** + * Open file picker and return file contents + * + * fixme: never ends if dialog closed + * + * */ public static async pickAndReadTextFile(acceptExtension: string): Promise { return new Promise((resolve, reject) => { const input: HTMLInputElement = document.createElement("input");