Initially i added full source code for viewer. but it has some format problem and all the code was messed with HTML format. So now i am asking step by step.
1) I uploaded an image file to my MySQL database. (it has no error, i.e. loaded successfully)
2) Fetching it back to the browser from MySQL Database. It has also no problem(in some condition)
a) It is printing OK if i am printing it before the HTML Tag.
b) I am not able to see any basic HTML design after printing image on browser.
c) If i am printing it inside html tag. It is showing some special characters and numbers, i.e. value which we see in phpmyadmin if we execute the query (select image from pix;)
So, Can any one help me to print image by fetching the image from MySql database?
Or can any one convert this database saved image from MySQL into real image to store into hard-disk back to see/edit it?
You are making a fundamental mistake here. An image resource is always stored and requested in a separate file, not in the HTML source code of the page you want to embed it in.
Such a separate file could be named, say, getimage.php.
It would fetch the image data from the database (e.g. from the record with the ID 890) and output it like e.g. so:
... code to fetch the image ....
header("Content-type: image/jpeg"); // or image/gif, image/png....
echo $imageData;
In the HTML page, you would embed it using
<img src="getimage.php?id=890">
There is the theoretical possibility to have image data directly in the HTML source but that's not what you want.
The answer is simple:
Do not store images in the database.
Store it on the disk.
It will eliminate all these problems for you.
As with the other answers, the best solution is to separate the image from the html source code.
That being said, if you absolutely require the image to be part of the page, and are not using internet explorer, it is possible to embed the image in the page.
it should be as simple (an example being a png) as:
<img src="data:<?php echo $mimeType ?>;base64,<?php echo chunk_split(base64_encode($imageData)); ?>" />
This only works in non IE browsers (I'm not sure about IE8, as I don't have it around to test at the moment).
Just make sure you get the mime type right (ex, image/png for png).
A little bit more info:
http://www.greywyvern.com/code/php/binary2base64
Related
I've been following multiple tutorials on uploading and retrieving images using MySQL and PHP, and they all seem to be using the same technique; upload the image as normal (no problem there) and then create another document and use a PHP script to select the image from the database then change the 'content-type' to image/jpeg, then display said document in an iframe.
That's fine and dandy; if I wanted to display one single image, and I was fine with it being in an iframe. However, I'm developing a CMS(like) system where the end user will be changing many styled images on a particular page and that technique doesn't quite work, as it appears to only work for single image.
I'm not looking to upload the files to a folder, then store the path in the database either. I'd like to store the image itself in the database.
I know this is a broad question and I definitely don't expect anyone to give me a step by step tutorial. But if you could direct me to one that would be great.
Thanks in advance.
The page used to display the image in the way you outline the tutorials show, with retrieval and then a header output is a way that sets the PHP image-calling file to act as an image file .
So you can have
<img src='phpimagefile.php?id=imgreference' alt'my image'>
for example.
If you want to display multiple images like this then you can simply roll the above HTML code into a foreach or similar loop on another page.
foreach ($imagesSet as $image){
print "<img src='phpimagefile.php?id=".$image['id']."' alt'my image'>\n";
}
Edit:
You can get really smart and with some mod_rewrite you can actually store images with filepath names such as :
<img src='/images/45757/goldenShower.jpg' alt='My Image'>
And the mod_rewrite will reorganise this to be able to find the image of:
<img src='/images/phpimagefile.php?id=45757' alt'my image'>
.
Storing the images directly in the database is cumbersome and does not solve your (apparent) problem of retrieval.
If you can clarify why being in the database is better for the image than a image output file as I describe above, this will probably show more people (judging from the comments) exactly what your current issue is.
Some Notes:
Don't use iframes. Use the HTML img tag as I example above.
We can't direct you to any tutorial until we actually understand what you're trying to gain.
Even if you upload the files to a database table, you are still going to need to store a reference to that table/row in order to reference the correct image, so imageId = 'files/image/goldenShower.jpg' is just another reference in the Database like imageId = 4365 would be.
Well in a particular website when I upload the image and then try to get the link of the image I get this:
data:image/svg+xml;base64,thebase64encodeOfMyImageCode
I have seen this in many of the website. After decoding the base64 code I find that its the code of my image file (guessed out by uploading svg image file ) . Can any one tell me how this work and where the image is actually being stored . There is no direct URL like website.com/image.svg etc. This is confusing me.
This image is not stored in a file. All the data for the image is stored in the data URL. The server most likely is storing this data in a database, which is then outputted in the webpage inline.
For more information, see MDN
When base64 encoding is used for the image - you simply cannot know where the actual image is stored, if it is available at all. It might not be stored on a file at all, but only on a database, or might be stored outside the domain. On some occasions, such images are generated in real time and not stored on a disk at all.
I would appreciate your thoughts on this method.
I have a page that uploads a pic given by user and displays it after saving it in a database now that's very simple so, I wanted users to be able to modify these images as they wish, hence I decided to add filters to these images using php. Now before these images are uploaded to the database I want the user to see a preview of what the image looked like after adding the filter.
The solution I came up was to send the image to php file using a form and AJAX using POST, do all necessary checks if file was safe. create a new image and add filter and then convert it to base 64 and send it back to browser and display it using a DATA URL
something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4/8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
Is this a good idea or there is something I should worry about?
Base-64 encoding adds about 33% overhead. For this reason, it is usually preferable to serve the image in binary form.
You can do this with a PHP script easily.
header('Content-Type: image/png');
echo $yourImageData;
Then in your HTML:
<img src="yourPHPScript.php?id=12345" />
hello we have a library for that actually, we make use of GD library to be able to achieve the correct image output that we would like to have, you can check more about our image library here.. by the way, our library does not only contain image library.. it has a bunch of useful libraries that you can actually use on your projects and we opensource it
http://eden.openovate.com/documentation/core/images
I'd like to know if it's possible to assign image data as text to an image in HTML form instead of setting it's "src" property to a file path... i want to do it with PHP!...
i remember seeing something like the following code in some websites' source...
for example:
image data = R6+1u5jwhwf6GOG6X6MpFR/hrlbNA1JcqeByPKDIivcJQa2ePIft0Jqewk4/lLYSy4YU1BXARkvdN7vJxx0vUOJGiU5OiMhMhWrH6s1n3pGK0Sat0mMiUCQX4e4BDU+yD1kB87tI+Xh+WitqNN7FyLysoGlAvsGfZQ2bOo+7+7Bm6K4NMktamfNG9v
in this way... by viewing the source of my webpage... it's not possible to see the address of the images used! just it's data! i think it's more secure! MAYBE!
Thanks!
It is not more secure as the picture has to be created in the browser to be displayed by the user.
What you could do (which won't make it any more "secure"), is to have a PHP script that translates your "data" into an image, see this thread for an idea on how to do this!
I think what you're referring to is Base64 encoded images in HTML.
It's not very portable though, not nearly as much as a standard img tag.
if you have image data you can show image on html page like this <img src="data:image/png;imagedatacodehere" /> , if it has png extension, check this link
Yes, it's possible, no it's not more secure. You're talking about data uris, and since the user's browser has to have the image data in order to display the image, you're still sending the picture to the user. All they have to do is right-click/save as on the displayed and boom, done. Also, the image data is just embedded in base64 format into the page itself, meaning you can trivially cut/paste that base64 string and still steal the image, even if you have all kinds of pointless image protection (e.g. right-click disablers).
Firstly this is for a simple university project, so time is more important than performance of database etc.
I have a database with images stored in blob files. Now some form outputs data from this database, but i want it to also output the image, along with the text.
I realise there is a bit of code to change headers to image, but then the text wont display, so is there a way to display the image and the text on the same page?
thanks a lot,
It is possible to embed images inside HTML, but you usually do it only if you have a really good reason to. Assuming you do, you write the following code, provided that $BLOB is the binary raw data of the image:
<img src="data:image/jpeg;base64,<?php echo base64_encode($BLOB); ?>"/>
Why not use image tags like normal wherever you need the images to be, and in the src attribute, specify a PHP script along with a get argument (for instance, <img src='image.php?name=something.jpg'>). This script then authenticates the request, accesses the database, sends the appropriate headers, followed by the actual BLOB data.