Retrieve image from MYSQL and display it in HTML - javascript

I am currently working on an online text editor for writing wikipedia-like articles.
Therefore I have <input type="file" accept="image/*">in HTML.
What I want to do is save the article as text to a MYSQL database and later, when displaying the article take the text from the database to show it in the page.
But how would I do this with the Images?
What's the best way to save them to a database?
And how can I retrieve them from the DB and display them?
I think wikipedia just displays an img-tag with an link to the image as source:
<img src="link_to_image">
but how could I create such a link?

First of all you can store an image in the DB but it's not a good practice.
There are already posts about this: Example
What I would do, anyway, is:
store the image in a blob column (maybe as base64 string)
First you have to convert the image, then store it in the DB. Assuming you are using PHP, you could do something like this:
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($imageData);
Then store it in the DB with a simple insert.
retrieve the image and return it as a response of a service
In mysql you should just do a select and then return it via (I assume PHP service)
browser side, to display the image: Example
This differs from what you want to do
<img src="link_to_image">
I had to do implement a solution similar to this one and works fine enough. You can encounter problems if the image is large in size (2MB for example) or if you want to fetch multiple images at once.
To achieve what you want to do, the best solution is to store the image in a file system that allows you to serve the files or , for example in AWS S3, and just save the image URL in the DB.

Related

What is the standard way to display a large number of images for each item in my database

I'm quite inexperienced and I am building a movie database website of roughly 100 movies using node.js, express, and mongoDB. Each movie has roughly 25-30 images, some of which will need captions, as well as a handful of text fields. I am comfortable with adding and storing the text to MongoDB but I'm not sure how to address the image section. I have all of the images stored locally on my device but I'm not sure where to go from here.
Would pushing all of the images into the database be the best way forward? That seems like an unnecessary step, but once again, I'm a beginner.
the best way is like this. create column image_url like char.
and your code :- before save the image , you need to generate some unique string. then rename your image using that unique string. now you can save your image into any cloud or, your storage path. after image saved, add db record. when you add db record save generated unique string into image_url column in db.
when you retrieve image from db, find your image in your saved storage path using that image_url ( unique string ) ❤️
don’t try to save full image with format in db directly. because it is bad practice.

how to upload canvas image using struts2 [duplicate]

I need to retrieve rows in database with a image saved in byte array. How do I display the image using Strut2?
I have displayed it by using custom result. I passed the id and make an action search for it in the database. My problem is how to invoke this several times? I have an action that retrieve all the rows. How to call display image action from the list action? Or is there a better way to achieve this?
JAVA
My action has an list of the objects I want to show on JSP.
JSP
First way: I use iterator tag and on each iteration I want to display the image which is in byte array. I want call the action to retrieve the image here.
Second way: I tried this post and it is not working for me.
<img src="data:image/jpg;base64, <s:property value="imageData"></s:property> />" >
Image data is the image in string.
To retrieve rows in database there's many ways but all of them utilize JDBC API. You can map the object as an image array containing bytes or blob or clob data that you persist in the database.
Displaying the images required to send it to the browser. In the Struts2 there's a stream result type that could be used to output the image data to the browser.
Or use the Servlet API to transmit the data on the JSP similar like in How to send and display image from action class to JSP in Struts 2 answer.
Combining the experience from the answers that you already enlighten in the question to stringify data you may achieve suitable results.

Save data URI in cookie to retrieve it later

I'm working with html canvas and creating a data URI to preview an image that the user can build himself. When he hits a preview button, the image gets displayed:
$("#show_label").html('<img src='+canvas.toDataURLWithMultiplier("png",1,1)+' width="157" height="202">');
Works fine. Now I want to save the dataURL in a cookie as I want to restore the image at a later stage on the website or store it in my database later.
$.cookie("current_label",canvas.toDataURL());
That won't work.
I understand that this is not a no-brainer, although it would make sense to store objects in a cookie as well. I guess I would have to encode the data URI and decode it later. But how? Researching didn't give me any results.
Also, could it be that cookies would become too large then so this is not even something to consider?
Should I store the dataURL in a SQL database instead and just use a cookie to identify the database entry (e.g. via ID)?
Any help appreciated.
Try using Web Storage objects.
Do you have to use cookies? Might I suggest using localStorage?
Example:
localStorage['aVariable'] = 'a Value';
//A week later this will still hold value:
alert(localStorage['aVariable'])

What is proper way to upload a image to a MySQL database?

What is the proper way to upload images into a MySQL database?
Generally, I declare the 'image' field as text and I use move_uploaded_file() function in order to save images on my server.
Is this the correct way to upload images into a database? I will have to upload lot of images, as social networking website might have to, for instance.
I think there are two reliable ways to work with images into your database:
1 - Store the file in some folder at your server, then write the filepath in some field in your image table.
2 - Encode your image as base64 with the base64_encode($yourImageData) method. This method will return a string that can be inserted into your table.
Preferably upload the image to server using File handling and PHP image libraries like GD and then store path as string in database. I think that should work.
As pointed out, it is not a good idea to save the image directly into database compared to save image on filesystem then save path/link to table fields.
but since the question is "upload images into mysql database"
I think you can check http://www.mysqltutorial.org/php-mysql-blob/

How to retrieve images from database using jquery and servlet

I need to retrieve the images which is stored in my oracle 11g R2 database. I'm trying to retrive the images using Jquery and servlet, And placing into the css division. But I'm a newbie in this. I know using json objects we can do this stuff. Please anyone tell me how to do
Make a request that returns a list of the names of all images (so that you know what to retrieve)
Make a servlet that serves images - gets the name as GET parameter, looks it up in the database (e.g. via JDBC) and streams the result back into the response.getOutputStream(), and set the correct content type

Categories

Resources