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.';
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);
In my react js web application, I convert html div to .png image through html2canvas and then save to server file path through php.
After saving the file in server the image size is reduced and also image is showing half and rest of the screen is black.
I have tried with html2canvas to convert html div content to png image , its working in client side but when i save to this file in linux server then file size is reduced and not showing full image.
const input = document.getElementById('chart_application');
html2canvas(input, {
logging: true, letterRendering: 1, allowTaint: false, useCORS: true, dpi: 200})
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const imgageData = imgData.replace(/^data:image\/(png|jpg);base64,/, "");
canvas.setAttribute('width',900);
canvas.setAttribute('height',700);
/*var link = document.createElement("a");
link.download = 'yourImage.png';
link.href = imgData;
link.click();*/
const data = new FormData();
data.append("data", imgageData);
var xhr = new XMLHttpRequest();
xhr.open( 'post', 'http://3.89.110.194/pdf.php', true );
xhr.send(data);
window.location.reload();
});
$image = $_POST['data'];
$filedir = 'merp2/public/pdf';
$name = 'chart';
$image = str_replace(' ', '+', $image);
$decoded = base64_decode(str_replace('data:image/png;base64,', '',
$image));
$path = 'merp2/public/pdf/'.$name.'.png';
unlink($path);
file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX);
chmod($filedir . "/" . $name . ".png", 0755);
I need your help.
I try to generate image like this with canvas (two images and text):
This i want
But after I save canvas file via php to png image all images disappear (text is OK)
Where is the problem with images ? I try this two day's but I can do this. I post here my code maybe some one find what I can do.
INDEX index.php
<canvas id="myCanvas" width="500" height="400"></canvas>
<img id="canvasImg"/>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function loadImages(sources, callback){
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources){
numImages++;
}
for(var src in sources){
images[src] = new Image();
images[src].onload = function(){
if(++loadedImages >= numImages){
callback(images);
}
};
images[src].src = sources[src];
}
}
var sources = {
arnold : "arnold.jpg",
silvester : "silvester.jpg"
};
loadImages(sources, function(images){
context.drawImage(images.arnold, 20, 20);
context.drawImage(images.silvester, 280, 20);
});
context.font = "15pt Calibri";
context.fillText("Arnold Schwarzenegger", 30, 300);
context.font = "15pt Calibri";
context.fillText("Silvester Stalonne", 310, 300);
var dataURL = canvas.toDataURL();
document.getElementById('canvasImg').src = dataURL;
$.ajax({
type: "POST",
url: "test.php",
data: {
imgBase64: dataURL
}
}).done(function(response) {
console.log('saved: ' + response);
});
</script>
PHP test.php
define('UPLOAD_DIR', 'images/');
$img = $_POST['imgBase64'];
$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);
//send request to ocr
print $success ? $file : 'Unable to save the file.';
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
HTML: One image (jpg) and a canvas. Set to proper dimensions. Not displayed
<img src="images/facebook.jpg" id="facebook-image" style="display: none;"/>
<canvas width="2000" height="1047" id="canvas" style="display: none;" ></canvas>
AngularJS: Draw the image in the canvas and add text to the canvas. POST to php file
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("facebook-image");
context.drawImage(image,0,0);
context.fillText('Hello world', 1300, 580);
var dataURL = canvas.toDataURL("image/png");
var config = {
method : 'POST',
url: 'save-image.php',
headers : {
'Content-Type' : 'application/upload'
},
data: { image: dataURL }
};
$http(config)
.then(function result(res){
//Goes in here and
}, function error(er){
});
PHP: Delete 'data:image/png;base64,', Replace spaces by '+', SAVE
<?php
$img = $_POST['image'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$file = "images/image_name.png";
$success = file_put_contents($file, $img);
echo "ok";
?>
Error :
The file is saved on the server, but it is empty
Possible problems:
- Image: Mime type is jpg, saved as png canvas and saved as png file.
- Image: not displayed in html
- AngularJS config: Headers!?
- php : Delete data:image/png;base64,
- php : Replace spaces by + sign
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("facebook-image");
context.drawImage(image,0,0);
context.fillText('Hello world', 1300, 580);
var dataURL = canvas.toDataURL("image/png");
var config = {
method : 'POST',
url: 'save-image.php',
data: { image: dataURL }
};
$http(config)
.then(function result(res){
//Goes in here and
}, function error(er){
});
php
<?php
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$img = $request->image;
$name = $request->name;
$img = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $img));
$file = "images/fb/my-file.png";
$success = file_put_contents($file, $img);
echo $success;
?>