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.
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 used upload tool for ASP.NET Core to upload person image, I put an HTML Image element beside the Upload image tool to display the image after upload it.
I invoke .Success event for upload tool and used a javascript function to set the src attribute for the image element with the uploaded image path. But unfortunately it does not work :(
This is the Image element
<img id="imgPerons" src="" width="200" height="250">
This is the javascript function:
function onSuccess(e) {
var files = e.files[0];
if (e.operation == "upload") {
document.getElementById("imgPerson").src = "~/images/person_photos/image.jpeg";
}
}
I think I have a problem with the path of the image, because I used online images like the following, and It works fine
function onSuccess(e) {
var files = e.files[0];
if (e.operation == "upload") {
document.getElementById("imgPerson").src = "https://www.example.com/image.jpeg";
}
}
What's the wrong with the path of the image?
I saved uploaded image in wwwroot/images/person_photos
The Image element and the javascript function in the path Views/Home/Index.cshtml
Removing ~ sign in javascript code should fix the problem because it's only processed on ASP.NET Core side
document.getElementById("imgPerson").src = "/images/person_photos/image.jpeg";
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 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.