I am trying to save the captured image in my server as jpg/png,I decoded the string as base64 and uploaded it but when i open the image it says 'the file cant open'. I don't understand why this is happening or i just missed any code.
jquery
navigator.camera.getPicture(onSuccess, onFail, { quality: 100,destinationType: Camera.DestinationType.DATA_URL });
function onSuccess(imageURI) {
var image = document.getElementById('dr_preview');
image.src = imageURI;
snapSrc = imageURI;
}
var img = document.getElementById('dr_preview');
var src = $('#dr_preview').attr('src');
console.log(src);
var dataparam = 'type=3&dr='+dr_value+'&image='+src;
$.ajax({
type: 'POST',
dataType: 'json',
async: true,
url: 'http://localhost/v_2/dr-getDrDetails.php',
data: dataparam,
cache: true,
success: function(data)
{
}
});
php
$data = $_POST['image'];
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
$filePath = $_SERVER['DOCUMENT_ROOT']. '/v_2/scanedDR/'.$dr.'.PNG';
$file = fopen($filePath, 'w');
fwrite($file, $data);
fclose($file);
You can use, this function that convert base64 to image.
function base64_to_jpeg($base64_string, $output_file) {
$ifp = fopen($output_file, "wb");
$data = explode(',', $base64_string);
fwrite($ifp, base64_decode($data[1]));
fclose($ifp);
return $output_file;
}
Related
I am working with php,I am getting Base64 image in api,And i want to save/store
into database and want to upload image into server,how can i do this ?
I tried with following code but getting following error
"failed to open content, Http writer doest not support writetable connections"
function imageupload()
{
$data = json_decode(file_get_contents("php://input"), TRUE);
$files=file_get_contents($_FILES["file"]["tmp_name"]);
$image = base64_decode($files);
$image_name = md5(uniqid(rand(), true));
$filename = $image_name . '.' . 'png';
$path = base_url().'upload/blog/';
file_put_contents($path . $filename, $image);
}
Remove base_url() from path.
OR
Check this out
jQuery :
$(document).on('click', '#upload', function () {
let form_data = new FormData();
let data_url = document.getElementById('my_image').toDataURL('image/png');
data_url = data_url.replace(/^data:image\/(png|jpg|jpeg);base64,/, '');
form_data.append('uploaded_image', data_url);
$.ajax({
url: 'upload-avatar',
method: 'post',
data: form_data,
dataType: 'json',
contentType: false,
async: true,
processData: false,
cache: false
});
});
PHP :
$img = $this->request->getPost('uploaded_image'); // for ci4
$img = $this->input->post('uploaded_image'); // for ci3
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$file_data = base64_decode($img);
file_put_contents(/* my_path and my_file_name */, $file_data);
I am trying to store Canvas image to server through PHP I can see the file but it shows 0 bytes. Can you please help me to fix this issue.
Here is my code below:
HTML:
<img id="image" src="data:image/png;base64,iVBORw0K..." />
JQUERY:
$('.submit').unbind().click(function(){
var dataURL = $('#img').attr('src');
$.ajax({
type: "POST",
url: "saveimage.php",
dataType: 'json',
cache: false,
data: {
imgBase64: dataURL
}
});
});
PHP:
$upload_dir = "../images/";
$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
file_put_contents($file, $data);
It should be $img = $_POST['imgBase64']
not $img = $_POST['data'] in your php
as your data object 's key name is imgBase64 when sending the ajax post request
I am using a nice tool called cropit and built a little application: You can check it out here
Now I tried to save the image instead of opening it in a new windows. I used this:
JQUERY:
$('.export').click(function() {
var imageData = $('#image-cropper').cropit('export');
$.post('upload.php', { imageData: imageData }, function() {
alert("success");
})
});
PHP:
$imageData = $_POST['imageData'];
$decoded = urldecode($imageData);
$exp = explode(',', $decoded);
$base64 = array_pop($exp);
$data = base64_decode($base64);
$file = 'data.png';
file_put_contents($file, $data);
In result I get a PNG file in my directory, which does not get an error when I open (I can zoom and do stuff), but it is blank. How do I make the image appear in the file?
This question already has answers here:
Pass Blob through ajax to generate a file
(2 answers)
Closed 8 years ago.
I'm trying to upload an image to a php server from a mobile app, converting file to blob and then uploading the blob with ajax. I get the image url after taking the photo with mobile. The uploaded file is empty. I think that should be an error while reading the file and converting to blob.
Client
var blob;
function get(){
var image = document.getElementById('image');
var file=image.src;
var oReq = new XMLHttpRequest();
oReq.open("GET", file, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
blob = new Blob([oReq.response], {type: "image/jpg"});
};
oReq.send();
var fd = new FormData();
fd.append("file", blob, "filename.jpg");
$.ajax({
type: 'POST',
url: 'http://site/upload.php',
data: fd,
processData: false,
contentType: false
}).done(function(data) {
alert(data);
});
}
Server
<?php
$dir="uploads";
file_put_contents($dir."/image.jpg",$_POST['data']);
echo "Done";
?>
Solved using base64 image with that
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
I have this code which send an image to test.php:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.captureVisibleTab(null, function(img) {
$.ajax({
type: "POST",
url: "http://imap24.pl/tests/dom/testy/test.php",
data: "img=" + img,
success: function(e){
alert(e);
}});
});
});
The img is base64 (data:image/jpeg;base64,/9j/4AAQSkZ...). I have this script in test.php
<?php
if (isset($_POST['img'])) {
$img = $_POST['img'];
$data = base64_decode($img);
$im = imagecreatefromstring($data);
imagejpeg($im, 'simpletext.jpg');
imagedestroy($im);
}
?>
And as the result I get this message
the data is not in a recognised format
What's wrong?
As you stated the image looks like this: data:image/jpeg;base64,…
So you should strip the first part of this Data-URL, then write it directly to a file:
$comma = strpos($img, ',');
$data = base64_decode(substr($img, $comma+1));
file_put_contents("simpletext.jpg", $data);