Loading an javascript image object from a server file - javascript

I am developing a mobile application that has this scenario: A user goes to one screen where they supply indexing meta data for an image. From this first screen they can go to a second screen where they select and upload the actual image to go with the meta data. Once selected, they go back to the first screen where they can then upload both the image and the meta data to a separate web service. Now, once the image has been selected and the user is back on the first screen, they may want to look at or change the image (that they previously selected) before actually submitting it to the web service. So I need to provide a way for the user to go back to the second screen and see the image they previously uploaded (without having to select it again). Clear so far?
In my ASP.Net MVC mobile application code I am caching the uploaded image to the server in a temporary file path on the server. Now I want to take that saved file and load it into a javascript image object so it can be displayed to the user when they go back to the second screen. How can this be done?

When you upload it to the server, the server can respond with a URL that can be used to retrieve the uploaded image. Capture that response and use it to set the src attribute of a new client-side Image object.

Related

Set Live Frame on Camera Capturing Image for mobile browser using javascript?

I have a feature of Upload File for uploading an ID Card in one of my website. When we open the website in a mobile browser we're getting option to Take Photo/Browse Image with the same Upload File button. If the user is trying to take photo and upload, then i want to restrict the user to take picture within a frame, so that user will place the id card within that frame and i can get a proper picture. Something like below(Reference from some android app)
Is this possible using html and javascript and if yes how it can be done?
Can it be done? Yes.
Lay out your web page with a <video> element where you want the preview to be, and with a "snap the picture" button looking the way you want it to. It's probably best to use a mobile-friendly responsive CSS framework like bootstrap to lay out the page.
Use .getUserMedia() with constraints that include the width and height of the image you need, and set the <video> element as the preview for its video stream.
When your user taps the button draw the video element into a canvas, then use .toBlob() to convert the canvas into an image file blob (JPEG, probably). Then post that blob to your server.
Giving every detail of the code to do this is beyond the scope of a Stack Overflow answer. But you can always ask more questions.

HTML form input tag not capturing all text characters on iOS (iPhone / iPad)

I have an HTML form with input tags and file tags. The user can upload an image and a data URL for that image will be generated using Javascript's file reader. A small preview of the uploaded image will then show up on the screen with its data URL passed in as the image source.
The data URL will also be passed in as a value for an input tag in the form.
Upon form submission, the data URL will be stored in a database. The user can then view an image gallery with all of the uploaded images (which will be accessed through the stored data URLs).
Everything works fine when uploading images from my laptop. However, the problem occurs when I upload large images from my iPhone and iPad. When uploading large images from my iPhone and iPad, only a small part of the data URL gets inserted as the input tag's value, and as a result, only a small part of the image gets rendered when viewing it in the image gallery. The image preview that shows up on the form page is fine on iOS - I can view the entire image there. I am just not able to submit the data URL, a long string of text (sometimes nearing a million characters) in its entirety. I have not set a maxlength value in my input tag, so I can't help but feel like there is some predefined maxlength value for html input tags on iOS.
Again, I have no problems uploading large images from my laptop - the entire data URL gets passed through and stored in the database. I am able to view all images uploaded from my laptop clearly and fully in the image gallery on all devices. I am just not able to upload large images in their entirety from iOS (iPhone/iPad).
Why could this be happening? And how can I ensure that the entire data URL gets passed in as the input tag's value on iOS?

How to load an image via a file loader as background images for multiple pages

I have a set of web pages and i want to set them with a background image but it must be something the client chooses through an
so all the pages have the background image the user chooses
also i'm loading the page using a node.js and express backend.
I already tried uploading images but it doesn't persist it must stay that way even after they close the application
I expect that when you open the web page you see the background you choosed
EDIT: ok so i'm thinking about loading it from a image folder and then storing the name of the image in the database?
any ideas or suggestions?
You can use multer to upload the images to your server and then save the images with reference to the user [user id] that uploaded the image. So next time when that particular user opens the web page, you will have a reference to their saved images. I hope this helps.

Upload Image by URL only

I need to upload an external image when a user pastes the url into an input bar. I am using dropzone, jquery, and backbone. So I'm thinking dropzone to upload the image, but I don't exactly know how it would work without the user literally dropping the image onto the page from the page they get it from. Any thoughts?

preview image after upload

I have a image upload page. When user upload an image they can preview it and add text into it before it save into database.
my question is
how can i preview the image in 2nd (preview page)
1.I have try file reader, but its not work for most of old browser. so im seeking another way
2.do i need to create another folder and save temp image into it?
(than save it into image folder after user have finished the editing)
something like google+ or facebook, how did they achieve this?
You could just receive the uploaded file, save it into some temporary folder and then show back to client. If they save form then move into the final folder. Otherwise every 24 hrs (or whatever you feel is necessary) delete the image or maybe if you can track pages then delete old images when they change pages

Categories

Resources