I'm making an app where i want to show the user a range of base64 encoded picture. They are shown by using data-url. If the user wants to save a picture, it can simply rightclick and save as (or drag it into a folder).
Are there any way to control the sugested filename? Right now Chrome just sugest "download" and doesn't even recognize it as an image. Can this be done in any way?
I only need it to work in Chrome.
Thanks for any help
Make sure you are setting the proper mime type for the image in the data uri. Doing this fixed the file extension in Chrome 17, for me. The file was downloaded as "download.png", and opened fine.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
However, if you really need full control over the filename, you can exploit the html5 "download" attribute of the a tag, to set the filename, and create a Blob object with your image data that will be used be downloaded.
See a demo here: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
Read more here: http://dev.w3.org/2009/dap/file-system/file-writer.html
The current specification does not make this possible.
Related
I have to download and re-upload a lot of images for work. Generally, the images I download from the webpage/server will come in the format of "XXX.jpg.webp" and "XXX.png.webp." Unfortunately, upon re-uploading them elsewhere, the system I use will not accept the ".webp" file extension. After I download the images with the ".webp" filetype, I'll have to convert them into pure ".jpg" and ".png" sans ".webp" to use them for my purposes.
As it stands, I have written a Tampermonkey script (in Javascript) in an attempt to remedy this problem, but it only works if I open a given ".webp" image in a separate tab and then right-click and save. This method strips the image of the ".webp" upon saving, but if and only if I open it in a separate tab and right-click to save. Instead, I would like to strip the images of the ".webp" extension and convert them into their ".png" or ".jpg" format on the very page that I find them, without having to open the image in a separate tab at all. Here's the current script I'm working with - again, it only works when I open the image in a separate tab:
document.querySelectorAll('img[src$=".jpg.webp"]').forEach(item =>
item.src = item.src.replace('.webp', ''));
document.querySelectorAll('img[src$=".png.webp"]').forEach(item =>
item.src = item.src.replace('.webp', ''));
And here is an example of a webpage that I do this for: https://www.shareably.net/mom-helps-single-dad-groceries/. Notice how the images have a ".webp" extension.
How can I go about altering the above script or getting a solution that converts these images on the original webpage and not in a separate tab? It would ultimately save me a ton of time. Any and all guidance would be much appreciated. Cheers!
An awesome user on reddit.com/r/AskProgramming helped me out with the solution. Seems like I was close. Here's the new working script:
document.querySelectorAll('img[src$=".webp"]').forEach(item => {
item.src = item.src.replace('.webp', '');
item.srcset = '';
});
Discussion of the solution can be found here: https://old.reddit.com/r/AskProgramming/comments/lslvvb/tampermonkey_method_to_drop_the_webp_extension/
I have a PDF file being viewed on the browser.
I want to disable Save, Download and print option of the PDF file.
Please help.
Try this:
<object width="100%" height="100%" type="application/pdf"
data="yourpdffile.pdf#toolbar=0" id="pdf_content"><p>Document load was not
successful.</p></object>
Make sure you add #toolbar=0 in the data attribute after your pdf file.
You can use iframe to your own version of PDF viewer.
Use pdfJS and when showing viewer.html just remove these buttons.
If user is viewing it on it's own tool, than you can't control it.
Google Drive can disable the PDF functions to download, print and copy as of 2015.
Note however, that users can still print using the browser print function.
https://gsuiteupdates.googleblog.com/2015/07/disable-downloading-printing-and.html
As others have noted, once the pdf is being viewed by the user, they can save it.
If you are just wanting to obfuscate the download, you could disable the menu as described but to truly prevent downloading of the PDF, then only thing you could really do is a little crazy but not impossible.
You could convert it to images and show those instead. Not an ultimate solution as they would still be able to save each image, but at the very least they would not get a PDF file from it (or at least if they are smart enough to convert the images to one, it would not be the same pdf file or content)
There are many tools to do this and you'd have to implement a viewer with paging but this might achieve what you want.
I already looked all around StackOverflow and Google to find a solution to this question but so far no luck.
Got a HTML page with dynamically rendered content from Django. All works good with standard text and images, however from time to time it also shows HTML5 Video element which in screenshot appears as a black image and thats it. Adding poster to it did not help. Does anyone know is it somehow possible to actually take screenshot of html5 video element? (not flash etc)
If not, my 2nd approach was to create a js variable with html content inside and then replace video with image created from poster attribute of the video. After that send that js variable to html2canvas for screenshot. Reason for this is I CAN'T alter page look and feel for user so I need to do this stuff in the background somehow. Idea was to use
var content = $(".content").html();
content.replace(video, image); // pseudo here for sake of question
html2canvas(content, { ...
However this only keeps giving me Uncaught TypeError: Cannot read property 'images' of undefined so that idea fails...
Does anyone know how to make this to actually work or maybe has any other idea how to replace video with image for the sake of html2canvas screenshot but with user not seeing any changes on the website?
Thanks a lot in advance!!!
It is possible to capture html5 video element onto the "screenshot" presuming it doesn't taint the canvas (i.e. cross-origin content).
Currently, html2canvas doesn't support capturing videos nor poster images, but pull requests are always welcome.
For the mobile website of a project I need to add a image-uploading button which does allow the access of the Iphone camera.
For example, the user does have his own profile and wants to add an avatar to that, he should have the possibility to make a photo, which is directly uploading to a database. Ive found some scripts where it is possible to access the photo-gallery, but i want to access the camera, which automatically uploads the picture...
Take a picture and upload
something like that!
Any help is much appreciated,
Greets
If you have iOS 6 or greater you can use the
<input type="file" accept="image/*" capture="camera">
For iOS < 6, you can always implement an image picker yourself and then inject the captured image data into the html as base64 encoded data.
Take the picture, base 64 encode your captured image data, then,
with jQuery, it should be quite simple:
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:#"$('#imagePlaceholder').attr('src','data:image/png;base64,%#');", base64ImageDataString]];
I'm having a bit of trouble using the retina.js script. I'm trying to swap the logo for a retina image on this page:
http://mikeleachcreative.co.uk/comps/fmp-mobile/
The script is included as instructed and there are definitely images included with the required '#2x' extension, you can view these images here to make sure:
http://mikeleachcreative.co.uk/comps/fmp-mobile/images/fmp_mobile_logo.png
add #2x onto the end of the filename to see the high-res version.
When this page is viewed on a retina device, I am still seeing the lower-res image, any help would be greatly appreciated.
Thanks.
It looks like (whenever the #2x image is checked) your server is returning 403 (not authorized). Check the settings on your server. Retina.js requires you to be able to make a HEAD request to the server (not GET or POST).