jsfiddle.net link to code problem is when you chose multiple image files, it load all images to browser, draws all divs, but only shows one image. It should give every div its own image.
This seems to be the trouble maker code part:
$('#import').change( function(event){
namelist = new Array;
var files = event.target.files;
for(i=0;i<event.target.files.length; i++){
pictures = files[i];
image = new Image();
image.id = i;
image.file = pictures;
var reader = new FileReader();
reader.onload = function(evt){
image.src = evt.target.result;
}
namelist.push({sourceimage: image, id:i});
reader.readAsDataURL(pictures);
}
drawDivs();
});
reader.onload = (function(image){
return function(evt){
image.src = evt.target.result;
};
})(image);
Closure fixed it
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);
});
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 video for which I want to provide a download link. However, having created a simple Download tag, when I click on it (in Firefox & Chrome) it starts playing the video instead of allowing the video to be downloaded. Is there a way that works in all current browsers to force them to offer the save-as dialog?
Try using the download attribute.
<a href="myvideo.mp4" download>Download</a>
More at:
http://www.w3schools.com/tags/att_a_download.asp
you should also try this.
if (isVideo) {
var div = document.createElement('div');
div.className = "column";
var vid = document.createElement('video');
var source = document.createElement('source');
source.type = "video/mp4";
source.src = display_src;
vid.appendChild(source);
vid.poster;
vid.controls = true;
var alink = document.createElement('a');
alink.href = display_src;
alink.id = 'downlo_click';
}
alink.text = "Repost"
// window.open(alink, '_self');
div.appendChild(vid);
div.appendChild(alink);
document.getElementById('gamediv').appendChild(div)
document.getElementById('downlo_click').addEventListener('click', function() {
var x = new XMLHttpRequest();
x.open("GET", display_src, true);
x.responseType = 'blob';
x.onload = function(e) {
download(x.response, "abcd.mp4", "video/mp4");
}
x.send();
// window.open(alink, '_self');
// download("data:text/html,"display_src, display_src);
});
}
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)