How we accept/trigger image keyboard (like GIF keyboard on Androids) with normal text input?
HTML:
<input type="text">
When I try to insert a gif so I get
Can't enter this content here.
So the question is how we can trigger user is inserting some GIF image?
like...
<input type="text" accept="..." oninput="...">
This is possible?
Resource: https://developer.android.com/guide/topics/text/image-keyboard
we cannot use GIF keyboard in HTML because for GIF keyboard we need some native code. but we can use on that javascript framework which supports mobile native side.
In React Native (javascript mobile framework) we can use react-native-image-keyboard package to get this keyboard android and ios
Yes it is possible. To get an image, you need to use <input type='file'>.
function displayImg() {
var file = document.getElementById('file').files[0];
//call the filereader
var reader = new FileReader();
reader.onload = function(e) {
//create the img tag
var image = document.createElement("img");
//get the image
image.src = e.target.result;
//resize the image
image.style.width = '100%';
image.style.height = '100%';
document.body.appendChild(image);
}
reader.readAsDataURL(file);
}
<body>
<input type=file name=filename id=file>
<button type=button onclick='displayImg()'>Display</button>
</body>
Related
I am using primeng p-fileupload to upload images, but I want to do programmatically to preview the image onUpload event, after uploading I am getting the image URL path as
blob:https://primeng-breadcrumb-demo-ntijjo.stackblitz.io/1c2dadec-e61b-42b7-8c6b-c56d342fb136, but the image is not showing ...so after inspecting the image its displaying
unsafe:blob:https://primeng-breadcrumb-demo-ntijjo.stackblitz.io/6a7a24d7-33fc-4738-b7f8-93b4b6007123
I am attaching the stack blitz URL for reference:-
https://stackblitz.com/edit/primeng-breadcrumb-demo-ntijjo?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Please help me with these issues.
Thanks in advance.
You can use the FileReader API to read the contents of the file and then set it as an src.
For example:
onUpload(e## Heading ##vent) {
const reader = new FileReader();
reader.onload = (e: any) => {
// Set image src
this.imageSrc = e.target.result;
}
reader.readAsDataURL(event.files[0]);
}
Then in your template:
<img [src]="imageSrc" />
I try using this jQuery cropper http://fengyuanchen.github.io/cropper/#examples , but there isnt any way to upload an image from your pc to cropper it, anyway the plugin page says that i have to upload using HTML5 FileReader object.
I try to do as follows:
HTML code:
<img id="cropper">
<input id="inputImage" name="image" type="file" accept="image/*">
Javascript code:
$(function() {
var input = event.target;
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function()
{
var dataURL = reader.result;
$("#cropper").attr("src", dataURL);
};
});
Now thatIf you run the code it works perfectly but when i try to modify the plugin src image attribute it doesnt works :(
any ideas? (sorry for my bad english)
I want to create a preview for image before upload it on the server, using JQuery.
My code, js code:
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
My html:
<input type='file' name='browse' onchange='Test.UpdatePreview(this)' />
<br/><br/>
<img src="#" alt="test" width="128" height="128" />
See jsfiddle: http://jsfiddle.net/aAuMU/
After onload, I see the src of image (using Google console application) and it looks like:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...
It is a way to get in javascript the base of image and assign to image in case I'm using IE as browser ?
FileReader doesn't work in IE < 10.
If you need it as getting nice effect then you could use flash like they do in
https://github.com/mailru/FileAPI
But when i needed to show image to user because i needed to let user select area for croping then i used form inside hidden iframe and uploaded image to server and sent back image data uri so i was able to get data uri and replace image src attribute, then when area was selected i did not send image back as file but as data uri. In old browsers it means you upload image twice, but i did not want to use flash as in some cases flash may also not be installed there.
LIVE PREVIEW CAN BE DONE IN JQUERY
We need an onchange event to load the image. img tag is given an id = frame, the function UpdatePreview() loads the image immediately after the image or file is selected.
function UpdatePreview(){
$('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type='file' name='browse' oninput='UpdatePreview()'/>
<img src="#" id ="frame" alt="test" width="128" height="128" />
Instead of
$("img").prop("src", target.result);
write
$("#ImageId").attr("src", target.result);
Where ImageId is the ID of your img tag.
I'm trying to load a file from the user and want to play it with javascript.
The file is loaded correctly, and I can access it seeing the name, the type and so on, with the FileList API.
What I can't do is to play the obtained file. I tried to do
myFile.play();
like I always do with loaded file, but it doesn't work.
Any idea?
If you only want to play the media content, instead of using FileReader, i suggest you to use the createObjectURL method. It is more efficient since it do not create a string containing the file content.
https://developer.mozilla.org/fr/docs/DOM/window.URL.createObjectURL
Just do :
audio/video.src=window.URL.createObjectURL(myFile);
Don"t forget to revoke your uri when loading another media file to avoid memory leaks :
window.URL.revokeObjectURL(audio/video.src);
You need FileReader API too (API compatibility) and your browser need support HTML5 audio tag.
Something like this:
<body>
<input type='file' id='fileInput' />
<audio id='player' />
<script type='javascript'>
var fileInput = document.getElementById("fileInput");
var freader = new FileReader();
freader.onload = function(e) {
document.getElementById('player').src = e.target.result;
document.getElementById('player').play();
}
fileInput.onchange = function(e) {
var files = e.target.files;
freader.readAsDataURL(files[0]);
}
</script>
</body>
You can read here for more.
My answer based on migerh's solution
Javascript Code :
window.onload = function () {
var canvas=document.getElementById("can");
var img=canvas.toDataURL("image/png");
var button = document.getElementById('saveImage');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
'9TXL0Y4OHwAAAABJRU5ErkJggg==';
button.onclick = function () {
window.location.href = img.replace("image/png", "image/octet-stream");
window.location.href = prev;
};
};
HTML:
<canvas id="can" width="500" height="200"></canvas><br />
<input type="button" value="Done" id="saveImage">
I am able to display the image on div from canvas but when i try to download it using above javascript function it downloads blank image. I want to know how can i get the picture drawn from the canvas.
Try looking here: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
The biggest problem you're likely to face is that you can only save the image on the same server as the page which has the canvas element. You'll then have to retrieve that saved image (either server or client side) and prompt the user to save it.
EDIT:
Maybe this would be better, though you need a little bit of server-side code:
http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/