Add / render State on page load

[7aklhz]

Hi. I'm trying to set an image with previous saved state (saved in my database). I'm trying the markerArea.renderState(mySavedState) but I cannot seem to make it work. Could you help me with an example how I can load an image with a predefined state on page load ?

[ailon]

Do you mean that you just want to render state on top of the static image when page loads? If so, you set everything up as you would normally (including the render event handler) but instead of calling show() you call renderState().

But that's probably a weird way to go about the task of just showing a marked up image, if you plan do it on every page load for every user.

[7aklhz]

Thanks for the answer. Here is my use case 1- On page A, user adds and annotates image 2- image and state are uploaded to database 3- On page B, user can see all annotated images

Instead of uploading orginal, annotated and state to database, I want to only upload original image and state. On page B, I therefore want to recreate the annotated images using the original image and the state. Let me know if you see a better way of doing this.

So here is want kind of works for the moment

screenshots.forEach((element, index) => {
        let markerAreaId = document.getElementById("img" + element.objectId);
        const markerArea = new markerjs2.MarkerArea(markerAreaId);
        markerArea.addRenderEventListener((imgURL, state) => {
            markerAreaId.src = imgURL
        })
        markerArea.renderState(element.maState)
    });

The issue is that the annotated image is blurry / the annotations are blurry / unreadable on the original image. Any reason and solution for that ?

[7aklhz]

Ok, found the solution. I needed to add

markerArea.renderAtNaturalSize = true;
markerArea.renderImageQuality = 1;

[7aklhz]

However, I'm getting a lot of the following message : "markerjs2.min.js:21 [Violation] 'load' handler took 176ms". Any idea why and how I can overcome this ?

I'm also trying to explore another solution : is there a way to create an instance (new markerjs2.MarkerArea()) without providing the html element ? what I would like to do is to grab my image (base64) from my database, add/apply the annotations from the state and serve the image (using Vue3 I'm trying to accomplish this by binding the src (v-bind:src="useMarkerJsFunction()")). Do you see a solution how this would work ?

[ailon]

As I mentioned, this is not the most sensible approach to do what you are trying to do. marker.js is not intended to be used as an annotation display engine. renderState() is a quite heavy operation intended to be used when you want to render image for storing somewhere and not just for real-time annotation display. If you do it in a loop for many images, it's a serious strain on the client's resources. Especially if you renderAtNaturalSize.

If you want to display multiple images with annotations at once the better approach would be to either use marker.js Live or save the annotated image or the annotation layer from marker.js after editing. You can save just the annotations by setting renderMarkersOnly to true. https://markerjs.com/docs/rendering-options

This way you can have your main image and your annotations separately and then just superimpose the annotation image layer on top of the original image.

[7aklhz]

so I'm currently saving the annotated image but was hopping to alleviate the size of my database. So renderMarkersOnly seems an interesting option. And how to I then superimpose the two images ? I imagine it would be something like this :

<div style="position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 50px;">
    <!-- we are putting a copy of the original image under the result image so it's always annotation-free -->
    <img src="img/sample-1.jpg" style="max-width: 600px;" onload="setSourceImage(this);" />
    <img src="img/sample-1-annotation.jpg" style="max-width: 600px; position: absolute;" onclick="showMarkerArea(this);" />
  </div>

[ailon]

Yes, something like that (minus the events)

[7aklhz]

Great, thank you for you help and for you great project !