- Timestamp:
- 2021-11-24T15:13:46+13:00 (2 years ago)
- 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 23 23 </table> 24 24 25 <img ref="image" :src=" imageUrl" class="image" :style="{ filter: filterString }" />25 <img ref="image" :src="src" class="image" :style="{ filter: filterString }" /> 26 26 </div> 27 27 </div> 28 28 29 29 <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"> 31 35 <span class="material-icons mdi-l">save</span> 32 36 </button> … … 151 155 }, 152 156 props: { 153 image: File 154 }, 157 imageBuffer: ArrayBuffer, 158 src: String 159 }, 160 emits: [ "closeAndDiscard", "closeAndSave" ], 155 161 data() { 156 162 return { 157 imageUrl: URL.createObjectURL(this.image),158 163 invert: false, 159 164 rotation: 0, … … 183 188 }, 184 189 methods: { 185 async getImageBlobAsync() {186 const buffer = Buffer.from(this.image .arrayBuffer());190 async closeAndSave() { 191 const buffer = Buffer.from(this.imageBuffer); 187 192 const that = this; 188 193 … … 193 198 } 194 199 195 //if (that.rotation !== 0) {196 // image.rotate(that.rotation);197 //}200 if (that.rotation !== 0) { 201 image.rotate(-that.rotation); 202 } 198 203 199 204 return await image.getBufferAsync(Jimp.MIME_PNG); 200 205 }); 201 206 202 return new Blob([ modifiedBuffer ], { type: Jimp.MIME_PNG });207 this.$emit("closeAndSave", modifiedBuffer, Jimp.MIME_PNG); 203 208 }, 204 209 -
main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue
r35743 r35746 1 1 <template> 2 2 <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"> 7 8 <span class="heading1">{{ translations.get("Title") }}</span> 8 9 <span class="material-icons mdi-xl">upload_file</span> … … 10 11 </div> 11 12 12 <div v-if="image !== null" class="image-area">13 <div v-if="imageUrl !== null" class="image-area"> 13 14 <div class="controls"> 14 15 <button class="btn-primary" @click="doOcr" :disabled="ocrInProgress"> … … 17 18 </button> 18 19 19 <button class="btn-primary" @click="showEditor = true" >20 <button class="btn-primary" @click="showEditor = true" :disabled="ocrInProgress"> 20 21 <span class="material-icons">edit</span> 21 22 <span>Edit Image</span> … … 60 61 .root-container-image-state { 61 62 width: calc(100% - 3em); 62 height: calc(100% - 3em); 63 height: calc(100vh - 3em); 64 max-height: calc(100vh - 3em); 63 65 } 64 66 … … 128 130 grid-column-start: span 2; 129 131 } 132 133 .text-container { 134 overflow: scroll; 135 } 130 136 </style> 131 137 … … 145 151 data() { 146 152 return { 147 /** @type {File} */ 148 image: null, 153 imageType: null, 154 /** @type {ArrayBuffer} */ 155 imageBuffer: null, 149 156 imageUrl: null, 150 157 ocrInProgress: false, … … 158 165 }) 159 166 }, 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 }, 160 182 methods: { 161 183 uploadFile() { … … 169 191 } 170 192 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 174 197 async doOcr() { 175 198 try { 176 199 this.ocrInProgress = true; 177 200 178 const imageBlob = await this.$refs.imageEditor.getImageBlobAsync(); 201 const arrayView = new Uint8Array(this.imageBuffer); 202 const imageBlob = new Blob([ arrayView ], { type: this.imageType }); 179 203 180 204 const result = await ocrService.run([ 181 205 { 182 206 image: imageBlob, 207 fileName: "file.png", 183 208 options: new OcrOptions(false) 184 209 } … … 196 221 } 197 222 }, 223 198 224 onEditorCloseRequested() { 199 225 this.showEditor = false; 200 226 }, 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 201 239 reset() { 202 this.image = null;203 240 URL.revokeObjectURL(this.imageUrl); 204 241 this.imageUrl = null; -
main/trunk/model-interfaces-dev/atea/ocr/src/js/OcrService.js
r35734 r35746 59 59 /** 60 60 * 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. 62 62 * @returns {Promise<{key: String, fileName: String, text: String}[]>} A JSON list of the recognised text. 63 63 */ … … 74 74 { 75 75 const element = images[i]; 76 const name = i + element. image.name;76 const name = i + element.fileName; 77 77 78 78 options[name] = element.options; 79 formData.append(name, element.image, element. image.name);79 formData.append(name, element.image, element.fileName); 80 80 } 81 81
Note:
See TracChangeset
for help on using the changeset viewer.