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)
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" />
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>
I have a file upload control that reads TXT file and load editBox with file content. The code blow works fine for onChange event for file upload control. But it I want to show loading gif icon or hourglass icon while it's loading a large data. E.g. if I try to load 3Mb file with about 130K lines it takes few seconds to appear in inputUsers edit box and then still loading the data. While this time users are able to click other controls or close the page. So how do I show loading icon when I call reader.readAsText(file); ???
var fileUploadControl = dojo.query("[id$=':fileUploadControl']")[0];
var file = fileUploadControl.files[0];
var reader = new FileReader();
reader.onload = function(e) {
dojo.query("[id$=':inputUsers']")[0].value = reader.result;
}
reader.readAsText(file);
NOTE: well, same happens when you copy/paste a very large text into multiline editBox. I need to show something while the list is loading
Have a try of this code
reader.onloadstart = function(event) {
ShowLoadingBar();
};
reader.onprogress = function(event) {
if (event.lengthComputable) {
if (LoadingBarVisible)
ShowLoadingBar();
AddProgress();
}
};
reader.onloadend = function(event) {
LoadingBarComplete();
};
I want to Create a piece of code which allows a user to upload an image and immediately display it, cropped, and with a water marker overtop of it which they can right click and save. Im wanting to use java/html to make this uploadable online. So far this code enables me to upload and display a photo without any cropping or watermark. I want this to be saveable, so using html to simply put a photo ontop of the image wont work.
<input type='file' onchange="readURL(this);" />
<img id="blah" class="watermark" src="#" alt="your image" />
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width("100%")
.height("100%");
};
reader.readAsDataURL(input.files[0]);
}
}
Use html canvas to work with images (crop, combine) on the client. You'll get image URI from a user, draw it on the canvas with your watermark, and then you'll be able to return it to user as image, or upload to the server as image.
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.