Changeset 35746


Ignore:
Timestamp:
2021-11-24T15:13:46+13:00 (11 days ago)
Author:
cstephen
Message:

Implement edit saving

Location:
main/trunk/model-interfaces-dev/atea/ocr/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue

    r35743 r35746  
    2323            </table>
    2424
    25             <img ref="image" :src="imageUrl" class="image" :style="{ filter: filterString }" />
     25            <img ref="image" :src="src" class="image" :style="{ filter: filterString }" />
    2626        </div>
    2727    </div>
    2828
    2929    <div class="control-panel">
    30         <button class="btn-fab" @click="$emit('closeRequested')">
     30        <button class="btn-fab" @click="$emit('closeAndDiscard')">
     31            <span class="material-icons mdi-l">cancel</span>
     32        </button>
     33
     34        <button class="btn-fab" @click="closeAndSave">
    3135            <span class="material-icons mdi-l">save</span>
    3236        </button>
     
    151155    },
    152156    props: {
    153         image: File
    154     },
     157        imageBuffer: ArrayBuffer,
     158        src: String
     159    },
     160    emits: [ "closeAndDiscard", "closeAndSave" ],
    155161    data() {
    156162        return {
    157             imageUrl: URL.createObjectURL(this.image),
    158163            invert: false,
    159164            rotation: 0,
     
    183188    },
    184189    methods: {
    185         async getImageBlobAsync() {
    186             const buffer = Buffer.from(this.image.arrayBuffer());
     190        async closeAndSave() {
     191            const buffer = Buffer.from(this.imageBuffer);
    187192            const that = this;
    188193
     
    193198                    }
    194199
    195                     // if (that.rotation !== 0) {
    196                     //     image.rotate(that.rotation);
    197                     // }
     200                    if (that.rotation !== 0) {
     201                        image.rotate(-that.rotation);
     202                    }
    198203
    199204                    return await image.getBufferAsync(Jimp.MIME_PNG);
    200205                });
    201206
    202             return new Blob([ modifiedBuffer ], { type: Jimp.MIME_PNG });
     207            this.$emit("closeAndSave", modifiedBuffer, Jimp.MIME_PNG);
    203208        },
    204209
  • main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

    r35743 r35746  
    11<template>
    22<div class="main-page-root">
    3     <edit-page v-if="showEditor" class="image-editor" :image="image" @closeRequested="onEditorCloseRequested" />
    4 
    5     <div class="paper root-container" :class="{ 'root-container-image-state': image !== null }">
    6         <div v-if="image === null" class="upload-area" @click="uploadFile">
     3    <edit-page v-if="showEditor" class="image-editor" :src="imageUrl" :imageBuffer="imageBuffer"
     4        @closeAndDiscard="onEditorCloseRequested" @closeAndSave="onEditorSave" />
     5
     6    <div class="paper root-container" :class="{ 'root-container-image-state': imageUrl !== null }">
     7        <div v-if="imageUrl === null" class="upload-area" @click="uploadFile">
    78            <span class="heading1">{{ translations.get("Title") }}</span>
    89            <span class="material-icons mdi-xl">upload_file</span>
     
    1011        </div>
    1112
    12         <div v-if="image !== null" class="image-area">
     13        <div v-if="imageUrl !== null" class="image-area">
    1314            <div class="controls">
    1415                <button class="btn-primary" @click="doOcr" :disabled="ocrInProgress">
     
    1718                </button>
    1819
    19                 <button class="btn-primary" @click="showEditor = true">
     20                <button class="btn-primary" @click="showEditor = true" :disabled="ocrInProgress">
    2021                    <span class="material-icons">edit</span>
    2122                    <span>Edit Image</span>
     
    6061.root-container-image-state {
    6162    width: calc(100% - 3em);
    62     height: calc(100% - 3em);
     63    height: calc(100vh - 3em);
     64    max-height: calc(100vh - 3em);
    6365}
    6466
     
    128130    grid-column-start: span 2;
    129131}
     132
     133.text-container {
     134    overflow: scroll;
     135}
    130136</style>
    131137
     
    145151    data() {
    146152        return {
    147             /** @type {File} */
    148             image: null,
     153            imageType: null,
     154            /** @type {ArrayBuffer} */
     155            imageBuffer: null,
    149156            imageUrl: null,
    150157            ocrInProgress: false,
     
    158165        })
    159166    },
     167    watch: {
     168        imageBuffer(newValue) {
     169            if (this.imageUrl !== null) {
     170                URL.revokeObjectURL(this.imageUrl);
     171            }
     172
     173            if (newValue === null) {
     174                return;
     175            }
     176
     177            const arrayView = new Uint8Array(newValue);
     178            const blob = new Blob([ arrayView ]);
     179            this.imageUrl = URL.createObjectURL(blob);
     180        }
     181    },
    160182    methods: {
    161183        uploadFile() {
     
    169191            }
    170192
    171             this.image = files[0];
    172             this.imageUrl = URL.createObjectURL(this.image);
    173         },
     193            this.imageBuffer = await files[0].arrayBuffer();
     194            this.imageType = files[0].type;
     195        },
     196
    174197        async doOcr() {
    175198            try {
    176199                this.ocrInProgress = true;
    177200
    178                 const imageBlob = await this.$refs.imageEditor.getImageBlobAsync();
     201                const arrayView = new Uint8Array(this.imageBuffer);
     202                const imageBlob = new Blob([ arrayView ], { type: this.imageType });
    179203
    180204                const result = await ocrService.run([
    181205                    {
    182206                        image: imageBlob,
     207                        fileName: "file.png",
    183208                        options: new OcrOptions(false)
    184209                    }
     
    196221            }
    197222        },
     223
    198224        onEditorCloseRequested() {
    199225            this.showEditor = false;
    200226        },
     227        /**
     228         * Called when the editor is saved in order to update the stored image buffer.
     229         * @param {Buffer} newBuffer The updated image buffer.
     230         * @param {String} newType The updated MIME type of the image buffer.
     231         */
     232        onEditorSave(newBuffer, newType) {
     233            this.imageBuffer = newBuffer.buffer;
     234            this.imageType = newType;
     235
     236            this.onEditorCloseRequested();
     237        },
     238
    201239        reset() {
    202             this.image = null;
    203240            URL.revokeObjectURL(this.imageUrl);
    204241            this.imageUrl = null;
  • main/trunk/model-interfaces-dev/atea/ocr/src/js/OcrService.js

    r35734 r35746  
    5959    /**
    6060     * Makes an OCR request.
    61      * @param {{image: File, options: OcrOptions}[]} images The image set to perform OCR on.
     61     * @param {{image: Blob, fileName: String, options: OcrOptions}[]} images The image set to perform OCR on.
    6262     * @returns {Promise<{key: String, fileName: String, text: String}[]>} A JSON list of the recognised text.
    6363     */
     
    7474            {
    7575                const element = images[i];
    76                 const name = i + element.image.name;
     76                const name = i + element.fileName;
    7777
    7878                options[name] = element.options;
    79                 formData.append(name, element.image, element.image.name);
     79                formData.append(name, element.image, element.fileName);
    8080            }
    8181
Note: See TracChangeset for help on using the changeset viewer.