I have an image on a web page constructed like so:
<img src="data:image/png;base64;...." />
The contents of the image come from the user pasting into the browser. My question is how do I then upload the image to the webserver (PHP if that matters).
1) Take the src attribute with javascript (or the data submitted by user)
2) Submit it to the server 'as is' or cut and submit everything after base64; (AJAX or POST, method GET is probably not very suitable here for large images)
3) Decode base64 on server side (everything after base64; if not cutted), save the result as binary - it is an image.
That's it.
ps: just a reminder - by careful with possible code injection. Check the submitted data or somebody will upload encoded php script. Disable php engine in the folder with uploads and verify that the final result is an actual image (with the help of GD library, for example). Even if the script can not run on your server it could be used for malicious requests to other servers with php scripts.
Just post the base 64 encoded text to your server.
You could save it as...
file_put_contents($image, base64_decode($str));
Related
I have a picture. For whatever reason, I need that picture to be sent to an environment that can only receive text and not images. Images and other files must be sent through their filter and I want to get around this. I calculated that there would be 480,000 independent hex values being manipulated but this is really the only option I have. Also, is it possible to compress and uncompress it for less pixels being sent? I will need to send the picture from a PHP web server [lets say, mysite.com/image.php] and receive it in Lua, and my only connection to the server is over a web request. No ftp, no even loading image files. Just setting 480,000 variables to the different id's
Oh, one more thing: it needs to not crash my server when I run it. ;)
Convert your image to base64 (Eg: Can pass to the variable).
Eg: I converted PNG image
Base 64 image will look like this.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE9JREFUeNpiYMADGLEJKssrCACp+Uw4JPYD8QdGHBIP7j58EMgCFDAAcvqBOBGI64FYAMpmYIFqAilYD6Udgbo+IBvXAMT/gXg9sjUAAQYAG6IS47QjgzEAAAAASUVORK5CYII="
You can use it in image source to display.
Hope this helps!
I have a page that is generating image data urls from a snapshot tool and inserting the resulting string into a MySQL database via PHP. Later on I have a page that takes and uses those images. This would be fine except I need to save the resulting html to my server for some post processing and the length of the image data urls is giving me a headache and making the html files upwards of 8 to 10 MBs which slows down the entire process. The image looks something like this:
<img src="data:image/png:base64,iVBORw0K43+gAA4u...">
Where there is an extremely long string of characters making the resulting html very large. Is there a way to host this on my server as a png so the link is a normal looking image? Something like this:
<img src="http://www.mysite.com/image1.png">
What about converting base64 to an original image, what you would be doing is saving the image as a actual file to the server.
Php to convert base64 data to image
function toImage($base_code){
$img_file = imagecreatefromstring(base64_decode($base_code));
imagejpeg($img_file, 'new.jpg');
}
Calling the function
echo toImage($encoded_image);
Make sure to only pass the base64 encoded string without the image tag
You can save the files elsewhere, but my guess is that you've got a requirement the images exist in the DB. If you save the files elsewhere, you've just doubled your disk requirements.
In any case, the general fix for this would be to save that image string to disk, and in your DB keep track of the path. Then when you generate the HTML, you'd use the path in the DB, rather than the binary data in the DB.
Is it possible to add php image resize code to my coldfusion page? Images look significantly sharper when resized by php instead of coldfusion(even when I use the coldfusion's imageResize "highestquality" option).
<cfftp action="PUTFILE"
server="#ATTRIBUTES.FtpServer#"
username="#ATTRIBUTES.FtpUsername#"
password="#ATTRIBUTES.FtpPassword#"
stoponerror="No"
localfile="#ATTRIBUTES.LOCALIMAGEFILE#"
remotefile="#Filename_Temp#"
transfermode="BINARY"
connection="DOCMGR"
retrycount="1"
timeout="60"
passive="Yes">
<!-- Add php resize image code here -->
If you can run PHP and ColdFusion on the same server, upload using CF and store the file in a common location.
Cfhttp GET a separate PHP page which resizes the image to your specifications.
Then the caller CF page would do what it needs to with the image.
If you cant get PHP and CF on the same server, you could always cfhttp POST the image to the other server. Make sure you use a multi-part form post, otherwise you'll lose data on images >~ 1mb.
If you're ftping the file from CF to another server, you could http post the image to PHP which could resize then ftp the new image for you without having to send it back to CF first.
The other option is calling imagemagick directly using the command line, ie. cfexecute.
You'll get better performance calling imagemagick directly, rather than having php pass on the request. Unless of course, you want to use php to programatically alter the images. You should be able to achieve the same results with well crafted command line calls though.
My project is an image processing script, using php, JavaScript and imagick (or imagemagick).
Currently, a user can change properties of an image with a browser which then jscript sends an Ajax call to my php script to process the changes, resave the image and send the file path and response back to the browser so jscript can then refresh the img tag.
I'm looking to make this process faster if possible.
Ideally, the processing php script would be able to output the raw image data straight after its processed changes with the appropriate mime header, but this can't be done as the same file needs to send a json response.
Any views and suggestions welcome..
EDIT: I should have mentioned what I have tried so far:
Because of the wide variety of operations available to alter the image, telling my php script what to alter via url string like <img src='image.php?id=132&layer1=flip' /> the url would often exceed the recommended maximum number of characters. Otherwise this would have been ideal.
I have also tried sending the base64 raw data back and processing it and although I haven't completely ruled this one out, it's got its drawbacks - adding base 64 data to the src of an <img> is not naturally supported in all browsers.
I don't know if this is the best way, but think about that:
you have to visualize your image with an <img src="">. Now you make following:
User clicks on button -> AJAX Request to Server -> Ajax Response with
URL to browser -> changing the src="" of the image and visualize
it.
replace it with following:
User clicks on button -> changing the src="" of the php file which
processing the manipulation and display it when ready.
give you some explaining code:
<img src="image.php?picid=123123" id="#image"><button id="#rotate90">rotate</button>
<script>
$("#rotate90").click(function(){
$("#image").attr("src","image.php?picid='123123'&do=rotate&what=90");
}
</script>
so you transmit to your php file via picid which pic you mean, do says what function you want to call and what is in dies example the degrees you want to rotate. Your PHP File has to give a Picture back with the correct headers (e.g, header('Content-Type: image/jpeg'); ) and the browser will load the image till the function finishes.
You can include the raw image data as part of your JSON response, and then interpret that raw data accordingly.
I am quite sure, this will not lead to a speedup: You would need to encode the image data, attach it to the JSON, decode on the client, then draw. Additionally chances are, the encoding the image data to a JSON would result in a much bigger volume of data to go ver the wire, negating any speedups, even if there were any.
There is a funny little trickt though, that can shave a bit more than a roundtrip off your latency:
Start your AJAX call to generate the image
Immediately (without waiting for the result) start your image refresh to a PHP script
In this PHP script, wait for the image generation to finish, and then immediately send it (Sort of long poll for an image)
This way you save the time from the moment the image is calculated, up to the new image request arriving on the server:
the result JSON being assembled
return phase of HTTP processing
Network latency downstream
Processing time on client
Network latency upstream for new image request
HTTP processing time for new image request
multiple images should be uploaded from iphone to a php server and images will be sent to php server as an http request.
something like this www.ursite.com/event_id=1234qwer&method=upload&data=!##$%^&*&^%$##!!....
data=!##$%^&&^%$##!!&&(&&$$%$#$#GFGF%$4....
it would a random value and it is packet of data[images]. We need to read this raw data using php
how can I do that??
http://pastebin.com/WAp5AV5Y
You shouldn't be sending your data as a GET request, you should be sending it as a multipart POST call. There's plenty of resources about that over the web, SO included. Also check out this page.
On the PHP side you will receive the uploaded files in the $_FILES array just as if the user uploaded the images from a HTML form so you don't need to do anything special to handle an iPhone upload.
I have some good news, and I have some bad news.
The good news is that the image data is just a JPEG, so GD's imagecreatefromstring will do the job nicely to ensure that the data is a valid image.
The bad news is twofold:
The data has come in without the benefit of URL-encoding, so it is surely corrupt.
GET method requests have a relatively small available data size.
You will need to have the data submitted as a POST, properly encoded.