Hello im uploading from input form a data:image, its works well with png and jpg
but i cant get work it with GIF.
<input value="data:image/gif;base64,...................................." type="hidden" />
What i need:
Create a file from a string with out losing animation. (the other problem)
Copy to a folder
The problem
Whatever gif im trying to upload i get a error from if (!$image) that image is not valid. Why ?
If i remove $image = #imagecreatefromgif($image); All works but image copied is only first frame from the gif, so its not animated (i heard GD have problems with it, maybe i can just copy full image from datestring, but how to save it right ? )
Im tried to use Gifencoder and Gifdecoder and imagemagick but the problem its doesn't recognize a image from datastring , i need to blob it ?
Here is my code
function ImageUploadString($data_string)
{
$data_string = str_replace('data:image/gif;base64,', '', $data_string);
$data_string = base64_decode($data_string); // decode image from base64
$image = imagecreatefromstring($data_string);
if ($image !== false) {
$random_imagename = str_shuffle(MD5(microtime()));
$extention = "gif";
$ufname = 'folder/'.$random_imagename.'.'.$extention;
$image = #imagecreatefromgif($image); /* Attempt to open */
if (!$image) {
imagedestroy($image);
die('gif error');
}
imagegif($image, $ufname);
}
}
$imagebase = "data:image/gif;base64,..........................................";
ImageUploadString($imagebase);
Related
I stored the video link in the database and stored the video in the public folder. a folder description is something like public/uploads/100/abcd.mp4.
I am reading this video from a Laravel method and receiving this video from Vuejs and trying to show the video in the <video> tag. I also tried to show the video using the direct link, something like <source src="/uploads/100/abcd.mp4">.
But this way I can only show the video but the video progress bar is not working and currentTime cannot be set this way because I tried to set it.
Maybe I need to receive the video in Vuejs using a different way. Please give me a solution to this. I am adding the Laravel method and Vuejs method here, which way i tried to receive the video, I don't know if it is the correct way to receive the video. Please give me the solution if you have any.
the video-tag
```
<video>
<source v-bind:src="axiosGetIntroVideo">
</video>
```
Laravel method from where I am getting the video path and reading the video and returning the video.
$data = Usercvvideos::select('id','userid','name','cv_video','upload_file_type')->where('userid', $id)->where('upload_file_type', $request->gettingFileType)->get();
$source_file = public_path()."/".$data[0]->cv_video;
$filesize = (string)(filesize($source_file));
$fileName = explode("/".$data[0]->userid."/", $data[0]->cv_video);
$originalFileName = $fileName[1];
header('Content-Type: video/mp4');
header('Content-Length: ' . $filesize);
header('Content-Disposition: attachment; filename="' . $originalFileName . '"');
header('Accept-Ranges: bytes');
return readfile($source_file);
Vuejs method from where I called the Laravel method written here and trying to receive the video and trying to show the video in <video> tag
async getIntroData(){
var gettingFileTypeByString={
'gettingFileType': 'introVideo'
};
let returnValue;
try{
await axios.put('url' + this.userId, gettingFileTypeByString
,{
responseType: "arraybuffer",
headers: {
"Accept": "video/mp4",
},
}
).then((response) => {
console.log(response);
returnValue = response.data;
});
let buffer = returnValue;
let videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' });
// let videoBlob = new Blob([new Uint8Array(buffer)]);
let url = window.URL.createObjectURL(videoBlob);
this.axiosGetIntroVideo = url;
}
catch(e){
console.log(e);
}
}
This way in Vuejs I tried to get the video but it is not working. please help me to get the video. I am stuck.
You should just record to db url where you uploaded file. Then just set that string to src of video. Also you'll need control attribute in video tag.
I am loading an image from the camera into an Image control. That works beautifully as shown below.
var photo = await Plugin.Media.CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions() { });
if (photo != null)
PhotoImageRear.Source = ImageSource.FromStream(() => { return photo.GetStream(); });
I sometime later need to take the images loaded into that PhotoImageRear control and convert it to a base64 string in order to post it to an API.
What would be the most efficient way of achieving that.
Thanks in advance for your help
From shared code ,once you get the photo, you can use the following code to convert to Base64 .
var stream = photo.GetStream();
var bytes = new byte [stream.Length];
await stream.ReadAsync(bytes, 0, (int)stream.Length);
string base64 = System.Convert.ToBase64String(bytes);
I have integrated Intervention Image library (v-2.5) into my laravel application (v-5.1) to resize images. It is working fine in local server, but when i deploy it to live server i'm getting this error: Unsupported image type. GD driver is only able to decode JPG, PNG, GIF or WebP files.
. My image size is 18kb and its mime type is jpg. So there is nothing wrong with my image. Here is my code that i'm using for convertion and saving to server:
foreach ($request->images as $file) {
// getting file name with extension
$imageName = getFileName($file);
$homeworkImage = new HomeworkImage();
$homeworkImage->tbl_homework_id = $homework->homework_id;
$homeworkImage->image_name = $imageName;
if ($homeworkImage->save()) {
// $file->move('uploads/homework', $imageName);
$image_resize = Image::make($file->getRealPath());
$image_resize->resize(300, 300);
$image_resize->save('uploads/homework/' . $imageName);
}
}
If i try to upload the image normally, that it is working fine. Can anyone point me out if i'm missing something!
I'm trying to upload images. The uploading working perfectly, but when I'm trying to upload a jpg image it will automatically convert to jpeg. This is my code
if($request->hasFile('image'))
{
if($request->file('image')->store('public/gallery'))
{
$gallery = new Gallery();
$gallery->album_id = $request->album;
$gallery->photo = $request->image->hashName();
$gallery->save();
Session::flash('message','Success:: Image added to gallery');
Session::flash('alert','alert alert-success alert-dismissable');
return back();
}
else
{
Session::flash('message','Warning:: Failed to upload the image');
Session::flash('alert','alert alert-warning alert-dismissable');
return back()->withInput();
}
}
I'm really looking for some help, Thank you
Laravel automatically determine file's extension by examining their MIME type.
Really there are no difference between jpg and jpeg. See JPG vs. JPEG image formats
I am working on a project which generates an image on the HTML Canvas, and then offers to download the image as a PNG.
The program has to be clientside (javascript).
I can convert the canvas to image by using
var canvas=document.getElementById('canvas');
var img = canvas.toDataURL("image/png;base64");
And the code that is supposed to download the picture is:
var container = document.querySelector('#container2');
//container2 is a div in HTML
var output = container.querySelector('output');
//output is inside container2
window.URL = window.webkitURL || window.URL;
var prevLink = output.querySelector('a');
if (prevLink) {
window.URL.revokeObjectURL(prevLink.href);
output.innerHTML = '';}
//removes the download link if already there
var bb = new Blob([img], {data: "image/png;base64"});
//creates new blob from the img variable
var a = document.createElement('a');
a.download = 'test' + '.png';
//file name
a.href = window.URL.createObjectURL(bb);
//create URL from blob
a.textContent = 'Click here for download';
a.dataset.downloadurl = ["image/png;base64", a.download, a.href].join(':');
output.appendChild(a);
This works perfectly if the blobvariable is a string of text instead of the "img" variable. Instead of an image, I get af corrupted .png file which, opened in notepad gives data:image/png;base64,iVBORw0KGgoAAAANSUhEU...(long string of base64 letters), which is the correct string, but apparantly not good for PNG images. But if I write
document.write('<img src="'+img+'"/>');
The image is opened correctly in a new tab.
How can i make the downloaded image uncorrupted?
(it seems impossible to download the data generated by Canvas2image )
looks like you need to convert the base64 string back to a blob. here's how:
Base64 encoding and decoding in client-side Javascript
The document.write might work on some browsers, if they are able to handle base64 natively.
The other problem is that JavaScript usually works with string, but to download the file you need something like a ByteArray. Here's an implementation, I've found: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js
That's how I got it working then:
var ab = Base64Binary.decodeArrayBuffer(img.substring(22));
var bb = new Blob([ab]);
var a = document.createElement('a');
a.download = 'test' + '.png';
a.href = window.URL.createObjectURL(bb);
a.textContent = 'Click here for download';
output.appendChild(a);