I build web application to manage spare parts for client,it comes with manual book as standard their part-id. I checked its part-id are unique numbers. Storing records using MYSQL v5.5.16 and web interface using PHP v5.3.8.
As client requirement, they want to have spare parts image to be listed in folder. Basically, when user inputting record and upload a image, i renamed the image based on part-id stored into database and copied an uploaded image to folder.
Yes, it work well when user displaying images (part-id: 241203, 299301 ... etc). When part-id come with 1/8S40003, as you know image name couldn't consist with some characters (/ \ : * ? " < > |).
I also put <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> between <head> tags and header('Content-type: text/html; charset=utf-8'); on the top of page.
I simplified, just encode '/' sign to html decimal code -> /.Storing image name into database seem work well, uploading image work 100%, i also checking image manually inside folder,
but when displaying image with
<img src='../Images/Spare parts/1/8S40003.png' />
Web browser automatically decoded it into path directory ('/'), but i checked a tag on 'view source', it written with <img src='../Images/Spare parts/1/8S40003.png' />.
Even using htmlentities, html_entity_decode, htmlspecialchar, htmlspecialchars_decode doesn't work and make it worse to convert '&' sign into &
I found another way, by using urlencode from php, by convert '/' -> %2F and append the rest of number.
<img src='../Images/Spare parts/1%2F8S40003.png' />
I checked a tag on 'view source', it written similar with above but it doesn't give an solution.
Anyone, who ever had experienced with this problem before or ideas would be appreciated ! Thank you.
As chirag indicated with his reply, the problem is that the file system does not accept some characters like / as well. So you probably stored the images with / in the file name.
So to use that messed up image name in the url, you need to use: urlencode(str_replace('/','/',$id)).
It probably would be better if you came up with a more solid scheme of generating file names from part ids, for example by applying rawurlencode to the file name. this would result in applying url encoding twice when refering to the image in html links, but it be solid: urlencode(rawurlencode($id))
Related
I have been trying to change the images in the WampServer Index.php File... When I looked at the Index.php File I saw something Interesting. The File its self was containing the Image in the RAW format. Latter in the Code the PHP Script Calls the Image using the URL like http://localhost/index.php?img=pngFolder called a Image file stored RAW in the PHP file as a png.
Here is a link to a website that has the index.php code...
Link
I would Like to know how to replicate this same process to work for other images. Granted the File will be larger but its a Price to pay for what I am doing for a project. The Reason I want some help with this is so I can do it correctly. I have Tried 2 times already. I managed to get it to call one image correctly but not some of the others. I'm not sure if the image is just a different encoding or what..... Any Help would be Appreciated.
They are using BASE64 to encode the images into text. You can google for a base64 encoder that will convert your images to text. You can then put the text directly in an <img src="..base64 text.." />
Here's one..
https://www.base64-image.de/
As far as getting the image from the url index.php?img=pngfolder..
You could put this at the top of the file
if(isset($_GET['img'])){
echo "...base64 string.."; exit;
}
Then you can use the index url as the src for your image and it will simply retrieve the base64 image
I'm having trouble figuring out if it's possible to embed an html or js document as an image, like so:
<img src="http://blah.com/image.js" />
or
<img src="http://blah.com/image.html" />
The general idea being that when the browser tries to access the file, it would execute the file clientside and get the actual image, and would then embed it as usual. I realize this can be done easily with PHP, but I'm looking for a non-server solution.
Problems being the content type it transfers as is wrong, and more importantly I think this violates every crossdomain and sandbox rule, to which I don't think there's any way around.
As long as the document you are linking to can display the binary data this will work.
Follow this article to solve the binary load with javascript, http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html
Then you can also include base64 data in img tags like this
<img src="data:image/png;base64,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" />
The src attribute must point to a URI that eventually results in actual image data. Perhaps you should consider leaving it blank and then creating a script that generates a data: URI and replaces it into the attribute.
I have an applicaton written in PHP that retrieves files from mongoDB Grid collection, and allows a user to view/download them based on if they're an image or not.
It's all working fine, except that the title bar of the browser displays the name of the php file I'm running the script in, rather than the filename of the image that's displayed. for example:
myphpfile (JPEG 1024 X 768 pixels)
I'm not sure if it's possible, but I'd like to change it if it is. If I right-click and select save as I get the correct image name, as user header() I've set:
content-disposition: inline; filename="thefilename"
I've also tried setting name with the content-type with no success.
Thanks for any help.
The only possible way is not to open image directly in the browser's window, but a simple HTML code like this:
<html>
<head>
<title>
Put your title here
</title>
</head>
<body>
<img src='your_script_generating_images.php?parameters'>
</body>
</html>
But did you think about some fancy and nice solutions like http://highslide.com/ or http://fancybox.net/? All that you need is to set the links to your script generating images and to update the page title correspondingly (which is not even required as you can write information you want just above the image in popup).
I am using this script which is one of the examples provided by jpgraph itself. When I put this on a web-page (blank) by itself, it's drawing the graph. But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.
GD is already enabled according to phpinfo(). Iam using jpgraph 3.5.0b1.
The problem is that you are mixing HTML/text output with image output.
Any time you have a PHP script generate graphical content you have to handle the output differently than normal HTML or text.
There are a few routes, I'll cover them briefly here.
Save the output to a file and use that filename in your HTML
//replace this line:
// Display the graph
//$graph->Stroke();
// with these lines:
// Default is PNG so use ".png" as suffix
$fileName = "/tmp/imagefile.png";
$graph->img->Stream($fileName);
.. then use $filename in an image tag, like this (for example):
print '<img src="'.$filename.'" />';
Create a standalone PHP script that will output the graphic
You can use the example script as-is, alone in a file called graph_render_script.php. Then, in your HTML, you use that script as a source:
<img src="graph_render_script.php" />
Output base-64 encoded data
Another route is to use base-64 encoded image data. This is relatively simple to do:
print '<img src="data:image/png;base64,'.base64_encode($graph->Stroke()).'" />';
As always, the documentation should be your guide!
Documentation
http://jpgraph.net/download/manuals/chunkhtml/ch05s05.html
base64_encode - http://php.net/manual/en/function.base64-encode.php
This worked for me:
putting the php code that generates the image in a file...Then on my html page I do this:
<img src="graph.php" >
embedding the graph inline is indeed possible. You'll have to use output buffering to capture the image data, then base64 encode that data, then use that base64-encoded string as the source in an <img>.
Try something like this:
$img = $graph->Stroke(_IMG_HANDLER);
ob_start();
imagepng($img);
$imageData = ob_get_contents();
ob_end_clean();
?><html>
<head>
<title>JpGraph Inline Image Example</title>
</head>
<body>
<h1>JpGraph Inline Image Example</h1>
<img src="data:image/png;base64,<?php echo(base64_encode($imageData)); ?>" />
</body>
</html>
ceejayoz made an excellent point in that this method is almost never what you want. I do not recommend embedding the image data like this unless you have a good reason to do so and understand the downsides, i.e. older browsers lack support for it, and the page size is dramatically increased (not only from the image data but the fact the image data is base64 encoded, which balloons the length). I've used this method in the field myself on a project last year, but it was only because the client refused to make a second request for the image.
But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.
You can't do that - you can't output an image as raw binary data within a page.
You need to put the code that generates the graph in a separate file, and use an image tag.
<img src="path/to/jpgraph/chart.php" />
The graph needs to be on its own page, you can't embed it. It outputs a raw JPG and you need to have no other content sent and have the proper headers to tell the browser it's a JPG. To embed the graph you'd make a different page called stats.php for example, and on that page you'd make an image tag pointing to the stand alone graph.
<img src=graph.php>
I've had this problem many times, I've noticed it happens when you have require() or include() in your Chart's script and those scripts have Data Base connections or special configurations.
I've solved this problem separating the data retrieving and the Chart drawing, passing parameters to the script or using SESSIONS to get the values.
Example of Embed image Chart in your PHP or HTML file:
<img src="linear_graph_customer.php?values=1,2,3,4|1,2,3,4|1,2,3,4&title=CHART&width=500&height=300" width="500" height="300" class="img" />
Regards.
Ok people, despite the best-known-practices, today I decided to do this:
<img src='<? include("dir/dir/img.png"); ?>'>
With 6 diferent .png images.
Sadly, only 2 of the 6 were nicely visible on the browser.
Why only 2 of the 6 images were shown? Maybe there were data losses bits on the way?
Thank you for your time :]
It does not work because src attribute of an <img> tag is not supposed to contain the raw data of an image; rather, it is supposed to contain a URI that points to the image data.
By using data: URIs, you can embed the image directly in your (X)HTML document. Note that this will not work in many browsers such as older versions of Internet Explorer. As well, there are limits, such as the 32KB limit IE8 places on data: URIs.
Using PHP, here's what your code would look like:
<img src='data:image/png;base64,<?php echo base64_encode(file_get_contents("dir/dir/img.png")); ?>'>
Don't forget to change the image/png part of the URL if the type of image that you are using changes. For example, if you use a GIF image, change it to image/gif.
That was not supposed to work at all.
For a standard way to do that (including images inline in the HTML document instead of pointing to their URL), see the data URI scheme.
include() tells PHP to parse that file. If, by any chance, it contains <?, you’ll be in real trouble. Instead, use readfile().
Additionally, Artefacto’s answer has to be considered as well.
< img src='< ?php echo 'data:image/png;base64,' . base64_encode(file_get_contents('dir/dir/img.png')) ; ?> ' >