source: main/trunk/model-interfaces-dev/atea/ocr/src/components/ImageDisplay.vue@ 35734

<template>
<div class="root">
    <div class="control-bar">
        <label for="input-invert">Invert: </label>
        <input id="input-invert" type="checkbox" v-model="invert" />

        <label for="input-rotation">Rotation: </label>
        <input id="input-rotation" type="range" v-model="rotation" min="0" max="360" class="slider-continuous" />
    </div>

    <img :src="imageUrl" class="image" :style="{ filter: filterString, transform: transformString }" />
</div>
</template>

<style scoped lang="scss">
.image {
    max-width: 100%;
    object-fit: contain;
}

.control-bar {
    display: flex;
    align-items: center;
    gap: 1em;
}
</style>

<script>
import { mapState } from "vuex";
import Jimp from "jimp/es"

export default {
    name: "ImageDisplay",
    props: {
        imageBuffer: ArrayBuffer,
        type: String
    },
    data() {
        return {
            invert: false,
            rotation: 0,
            internalBuffer: ArrayBuffer,
            imageUrl: String
        }
    },
    computed: mapState({
        translations: state => state.translations,
        filterString() {
            let filters = "";

            if (this.invert) {
                filters += "invert(1) ";
            }

            return filters;
        },
        transformString() {
            return `rotate(${this.rotation}deg)`
        }
    }),
    watch: {
        internalBuffer(newValue) {
            if (this.imageUrl != null) {
                URL.revokeObjectURL(this.imageUrl);
            }

            if (newValue === null) {
                return;
            }

            const arrayBufferView = new Uint8Array(newValue);
            const blob = new Blob([ arrayBufferView ], { type: this.type });
            this.imageUrl = URL.createObjectURL(blob);
        }
    },
    methods: {
        async getImageBlobAsync() {
            const buffer = Buffer.from(this.internalBuffer);
            const that = this;

            const modifiedBuffer = await Jimp.read(buffer)
                .then(async image => {
                    if (that.invert) {
                        image.invert();
                    }

                    if (that.rotation !== 0) {
                        image.rotate(that.rotation);
                    }

                    return await image.getBufferAsync(Jimp.MIME_PNG);
                });

            return new Blob([ modifiedBuffer ], { type: Jimp.MIME_PNG });
        }
    },
    beforeMount() {
        this.internalBuffer = this.imageBuffer;
    },
    beforeUnmount() {
        if (this.imageUrl != null) {
            URL.revokeObjectURL(this.imageUrl);
        }
    }
}
</script>