Now I have a form field:
<input id="my_img_field" type="file"/>
After I select the image in the browser, I want to render the selected image file on the target img tag:
<img id="image_preview" />
But I want to do this after the $('#my_img_field').change event, i.e. I may want this done when I click some button later.
I heard that this could be done using HTML5 technique. Can someone teach me how?
the code in vanilla js
var file = document.getElementById('my_img_field').files[0]
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function(e) {
var img = document.getElementById('image_preview')
img.src = this.result
}
The following approach will work:
var file = $('#my_img_field')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = $('#image_preview');
img.attr('src', this.result);
}
It can be like this
const file = document.getElementById('my_img_field').files[0]
const link = window.URL.createObjectURL(file)
Related
I'm trying to get the file blob using the following function:
$('body').delegate('[id^="prod_img"]', 'click', function()
{
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = $('#prod_img' + id).files[0]; // <- what's the solution here
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
but I get a cannot read property '0' of undefined error. I know the answer is probably on the web, I just have difficulty conceiving the correct search term. Anyway, will you assist me here? I usually code
var file = event.target.files[0];
and I now don't know how to get the event here. Thanks.
UPDATE
The markup for the input element looks like so:
<input accept="image/*" title="Choose an image with a 250 x 300 pixel resolution." data-id="2" name="prod_img2" id="prod_img2" type="file" >
var selectedFile = $('#prod_img' + id).files[0];
files is a property of a DOM element, not a jQuery object. You need to extract the DOM element from the jQuery object that wraps it:
$('#prod_img' + id)[0].files
I got my code to work by adding an event variable like so:
$('body').delegate('[id^="prod_img_"]', 'change', function(event)
{
event.preventDefault();
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = event.target.files[0];
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
What is the id of this canvas: carstenschaefer.github.io/DrawerJs/examples/fullscreen I want to add download button to under this canvas. I imported the source code into vscode. I tried various download codes but none of them worked. I think I'm writing the id wrong.
document.getElementById('download').addEventListener('click', ()=> {
var canva = document.getElementById("canvas");
var image = canva.toDataURL("image/png").replace("image/png", "image/octet-stream");
var element = document.createElement('a');
var filename = 'test.png';
element.setAttribute('href', image);
element.setAttribute('download', filename);
element.click();
})
When you create an instance of drawer
const drawer = new DrawerJs.Drawer(null, { ...options });
You can call
drawer.api.getCanvasAsImage()
To get the canvas converted to base64 which you can then use it to Post to a backend server or download it.
Took at look at download.js maybe you could try using it to help with saving.
I want to use image cropper tool for that I have use cropper.js.
image cropper is working fine but I want to show image after cropping in another image tag
for that I have use below code
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
var croppedImageDataURL = $('.preview').cropper('getCroppedCanvas').toDataURL("image/png");
}
});
but it is not working myfor my full code I have made jsfiddle.
can anybody help me in this
I want to check the dimensions of the image when the user selects the file to upload with <input type = "file">
So far I've done this code:
HTML
<input type="file" accept=".png,.jpeg,.jpg" ng-files="getTheFiles($files)" ng-model='company.logo'>
AngularJS
var reader = new FileReader();
reader.readAsDataURL($files[0]);
reader.onload = function(e) {
$scope.imgpath = new Image();
$scope.imgpath = e.target.result;
console.log($scope.imgpath.width, $scope.imgpath.height);
}
In the console, the height and width of the selected image is being shown as 0,0.
I've referred the answer(which is not accepted but upvoted 5 times) from this question.
Thank you for your help.
Okay I tried this code and it worked:
var fileReader = new FileReader();
$scope.imgpath = new Image();
fileReader.onload = function (event) {
$scope.imgpath.src = event.target.result;
$scope.imgpath.onload = function(){
console.log(this.width, this.height);
};
};
Source : This code from CodePen
$scope.imgpath = e.target.result;
should be
$scope.imgpath.src = e.target.result;
i have a script that changes the current image with the selected image but i need to insert an attribute so that it targets the image tag with only that class
CODE----
<script>
$(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").attr(".the_pre_prev").prop("src", target.result);// tried $("img").attr("CLASS NAME").prop("src", target.result)
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
If you want to target an image with an specific class, you can simply do (assuming you're using jQuery):
$("img.the-class").attr("src", target.result)
See the jQuery class selector for reference.