Is there a "good" way to generate a thumbnail for a JPEG file that doesn't have on in the EXIF information?
If a user uploads an image, I'm trying to display the thumbnail, but if there's no thumbnail in the image the display is blank (src=""). Currently we replace blank images with a loading image that gets swapped out with the thumbnail generated on the server by an AJAX call back.
Is there anything I can do client-side (jQuery & jQuery UI are already integrated, but open to new libraries if they'll help) other than displaying a loading image that gets changed by the AJAX call back?
For clarification I don't just mean taking the Base64 raw data and changing the height and width attributes most of our users upload 5MB+ files, and the text alone crashes the browser if we use the raw data. I mean actually appending a thumbnail to the EXIF, or creating it and using the created base64 data as the image source.
Apologies in advance for breaches in etiquette or lack of clarity, this is my first question on Stack Overflow.
Related
i have tried to implement image upload like in this example for ngx-quill editor: https://github.com/KillerCodeMonkey/ngx-quill/issues/89#issuecomment-542907588
It uploads the image, all is good.
But for some reasons, the image doesn't insert in the editor after server returns me the url to the image.
I notice that
range = this.meQuillRef.getSelection(true);
range.index it is always 0, i guess it shouldn't be.
Maybe someone already faced this issue and found a solution, thanks!
I am trying to implement the example provided on the following link http://www.amcharts.com/tutorials/export-charts-advanced/ and its working fine.
In the sample PDF layout they a have predefined image for logo, this is a base64 PNG image. my problem is that i have taken and saved the logo image from user to be used in reports.Image is on a specific known location at server which might be accessed through a URL in my java script. but how can i access this image and reference it in my PDF layout so that it can be used as an header or logo image in my PDF reports.
whether there's a method to provide the image URL instead of providing a static base64 image data or do i need to write a function to to get image from server and convert it to a base64 image data and assign it to the logo attribute in the PDF layout.
please watch the sample layout at following link http://extra.amcharts.com/support/export/report/layouts/layout_1.js
in the above link i am concerned about the last part "predefined images" i want to get this image from my server with a URL or with any suggested method.
Kindly help.
Thank you.
I have a page that has a list of many <img> tag. So it takes a long time to load all images. Before loading any image, I see the broken image icon. I want to replace broken image while loading the images. I tested this answer, but it just worked when a error happens. Is there anyway for doing that with javascript or jquery?
I found a good solution on GitHub. Just use the CSS code below:
img[src=""],
img:not([src]) {
visibility: hidden;
}
Link: https://github.com/wp-media/rocket-lazy-load/issues/60
You can load a placeholder image, but then you must load that image (when you're already loading another image). If you load something like a spinner via a GET request, that should be ok since you can set cache headers from the server so the browser does not actually make any additional requests for that loading image. A way that Pinterest gets around this is by loading a solid color and the title of each of their posts in the post boxes while the images are loading, but now we're getting into a design discussion. There are multiple ways to skin a cat.
Regarding loading several images, you have to understand a couple considerations:
The time it takes to fetch and download an image.
The time it takes to decode this image.
The maximum number of concurrent sockets you may have open on a page.
If you don't have a ton of images that need to be loaded up front, consideration 3 is typically not a problem since you can optimistically load images under the fold, but if you have 100s of images on the page that need to be loaded quickly for a good user experience, then you may need to find a better solution. Why? Because you're incurring 100s of additional round trips to your server just load each image which makes up a small portion of the total loading spectrum (the spectrum being 100s of images). Not only that, but you're getting choked by the browser limitation of having X number of concurrent requests to fetch these images.
If you have many small images, you may want to go with an approach similar to what Dropbox describes here. The basic gist is that you make one giant request for multiple thumbnails and then get a chunked encoding response back. That means that each packet on the response will contain the payload of each thumbnail. Usually this means that you're getting back the base64-encoded version of the payload, which means that, although you are reducing the number of round trips to your server to potentially just one, you will have a greater amount of data to transfer to the client (browser) since the string representation of the payload will be larger than the binary representation. Another issue is that you can no longer safely cache this request on the browser without using something like IndexedDB. You also incur a decode cost when you set the background image of each img tag to a base64 string since the browser now must convert the string to binary and then have the img tag decode that as whatever file format it is (instead of skipping the base64->binary step altogether when you request an image and get a binary response back).
you can use placeholder image, which is very light weight and use that in place of each image.
same time while loading page, you can load all the images in hidden div.
then on document ready you can replace all the images with jQuery.
e.g.
HTML
<img src="tiny_placeholder_image" alt="" data-src="original_image_src"/>
<!-- upto N images -->
<!-- images are loading in background -->
<div style="display:none">
<img src="original_image_src" alt=""/>
<!-- upto N images -->
</div>
JavaScript
(function($){
// Now replace all data-src with src in images.
})(jQuery);
How do I turn the div with id "uploadWrapper" from this jsFiddle into a button that can upload images - basically doing the same as <input type="file">. Thanks in advance.
EDIT - DUE TO ANSWERS RECEIVED
How can I show a preview of the image in the place of the div with the blue background when someone uploads an image, see this jsFiddle
Check this fiddle: http://jsfiddle.net/techfoobar/kM9aa/1/
Preview: Like Justin Satyr said, there's no way using plan HTML/JS to preview the chosen image unless you upload it to your server and use the uploaded image's URL.
This is not as easy to do as one would imagine, and some browsers prevent triggering file uploads from untrusted elements automatically for security purposes.
I recommend using a third party file upload plugin, such as Plupload, or faking a custom button using progressive enhancement (invisible file upload button, with a custom graphic under it (of course not the most flexible of solutions) as described here:
http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
Plupload events allows you to hook into the events that might occur during ajax file upload, and do stuff with the upload info. See this page on examples of what response data you might get:
http://www.plupload.com/example_events.php
You can get response data like this:
id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png
And of course you can modify what the server returns on a successful upload, to be able to get the full absolute URL to the uploaded image.
After you have this data, you can hook into it and switch the image doing something like this (with jQuery):
// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
$('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}
You can't unless you use Flash, Silverlight, or an Active-X object. Browsers lock down all file browsing operations.
You can appear to do this by making the <input type="file" /> invisible but over a button so that when the user clicks the "button", they are actually clicking the input.
UPDATE:
In response to your second question, to preview the image, you would need to post it to your server and then point your img's src to an image path on your server.
I wonder if there's any way to read the images in the web page
cause I want to make a small plugin that can upload them to my server,
First,I set the images draggable and then I drap them to a small "box" and upload them,
Maybe the File API in HTML5,But I found it can only read local file unfortunately,
Anyone get some ideas?Thanks
If you want to deal with images (croping, resizeing etc) you have to use HTML5 <canvas> element. But if you just want to have an image element, you can use this:
var myImg = new Image();
myImg.src = "url_to_image";
If I understand you correctly, you want to copy images from some page to your server? You can get page source, all images links and display it in javascript, but to upload it to your server you have to use one of server side languages like e.g. PHP.