search

SeregPie / VuetifyImageInput

Provides basic image editing tools.
https://seregpie.github.io/VuetifyImageInput/
MIT License
131 stars 36 forks source link

dynamicly load imageData #22

Closed DaWoCX closed 4 years ago

DaWoCX commented 4 years ago

Hey there! Great component so far. I only have one question: I get my imageData from the server and I put it into the imageData (v-model). But there is no image shown. Maybe I missed it but is there a way to provide the imageData and show it without the user selecting an image first?

Thank you very much!

sergeymitrichev commented 4 years ago

Same question.

I did this way: if image received from server, then I would render v-img with image src. If not: show v-image-input. On v-img @click just show input and hide image. Not the best option, but it works.

DaWoCX commented 4 years ago

I did this way: if image received from server, then I would render v-img with image src.

How did you get v-img to render the pure imageData? Or did you pass the path as src?

DaWoCX commented 4 years ago

I did this way: if image received from server, then I would render v-img with image src.

How did you get v-img to render the pure imageData? Or did you pass the path as src?

Ah okay I fixed this using: v-bind:src="'data:image/jpeg;base64,'+imageData

But are you able to use the v-image-input features like zoom / orientation-switch and stuff using v-img?

Thank you in advance!

sergeymitrichev commented 4 years ago

But are you able to use the v-image-input features like zoom / orientation-switch and stuff using v-img?

If user starts interacting with the image, I show them input. You can add the edit button when hovering over v-img and switch to v-image-input after clicking this button.

DaWoCX commented 4 years ago

If user starts interacting with the image, I show them input. You can add the edit button when hovering over v-img and switch to v-image-input after clicking this button.

Thanks for the fast answer! But after checking whats behind the prop imageData I figured I just use the same "trick" as with v-img and now I ended up with this:

<v-image-input v-model="imageData" :image-quality="0.85" clearable image-format="jpeg" />

and adding 'data:image/jpeg;base64' to my server response like this:

this.imageData = 'data:image/jpeg;base64,' + response.data;'

This does the job for me so far! Now I can load images from the server and the user can open images manualy by clearing the viewer and use it in the standard way

sergeymitrichev commented 4 years ago

Thanks for the idea, I'll do the same

SeregPie commented 4 years ago

Hi. Yes. Value accepts an image data url. Here you find the syntax: https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs