I am using KineticJS to create a web application which is a standalone application using html5, css and javascript.
I have the following piece of code to convert the present canvas into an imageURI.
function save()
{
stage.toDataURL({
callback: function(imageURL) {
window.open(imageURL);
},
mimeType: 'image/png',
quality: 1,
height: 480,
width: 640
});
}
The save() is triggered using a button's onclick property.
I have two issues to be solved :-
I want to be able to open a "Save As" dialog box when I click on this save button.
Rename the file, instead of "download.png" to present date time as the file name. For e.g., "020420130306PM.png" ( Date 02/04/2013 Time 0306 )
My stage size is 958 X 598 and I want to save the file as a 640 X 480. The height and width attributes in toDataURL function only crop off top 640 X 480 pixels of the canvas. How do I compress the entire stage ( 958 X 598 ) into a ( 640 X 480 ) and save it.
My present solution is the one stated in KineticJS tutorial which is click on the save button, new page opens up with canvas image, right click the image, save as image, rename file from download.png to 020420130306PM.png and click save.
I solved the third part using setScale method and it worked perfectly fine.
I solved the second part which is renaming the file, however, I am restricted to chrome browser, and without the ability to save it anywhere else other than the default downloads folder.
There exists a download attribute in <a> tags. If download = "myfilename.png"then the file will be downloaded as myfilename.png
First of all, to force the browser to download the file, you should modify the imageURI.
var newImageURL = imageURL.replace("data:image/png;base64","data:image/octet-stream;base64");
Now, to add and modify attributes just use jQuery attr() function along with click(). For e.g.,
$('#saveAnchor').attr('download',filename);
$('#saveAnchor').attr('href',newImageURL);
And now trigger a fake click on the anchor link using $('#saveAnchor')[0].click();
So basically when the save() is called, all the above occur in the callback function.
But I would still like know if there is any possible method of being able to save the image using "Save As" dialog box without the use of PHP or AJAX.
Related
Can I take a screenshot from the clipboard, send it to ajax and put it in an <img> tag?
For example,
I have this form:
<form>
<div id="img"><img src="need put screen here!"></div>
<textarea></textarea>
<button type="submit">Answer!</button>
</form>
I need it! People are asking for screenshots from the clipboard.
If the screen stays in the clipboard in code base64, I make it to a picture in PHP.
I only don't know, how I can take a screenshot from the clipboard and send it to ajax.
Yes, you can:
Capture data in the clipboard as pasted within your Web page
Upload said data somewhere via HTTP
Display said data as an image within your Web page
To obtain data in the clipboard you attach an event listener for the "paste" event type. The event is fired on the active document element and bubbles all the way upwards the element hierarchy towards the document window.
The ClipboardEvent object that your event listener is passed, will let you obtain the actual data in the clipboard, text and/or image:
addEventListener("paste", ev => {
for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
/// Do something with the data, image available as `item.getAsFile()`
}
}
});
The image data would be available with item.getAsFile(), a File (subclass of Blob). You can upload the blob trivially:
var xhr = new XMLHttpRequest();
xhr.open("PUT", "http://example.com");
xhr.send(item.getAsFile()); /// Send the image with HTTP somewhere
You can also display the pasted image, assuming you have <img id="foobar"> somewhere in your document:
document.getElementById("foobar").src = URL.createObjectURL(item.getAsFile());
You can use html2canvas, to take screenshots and upload them, all using JavaScript.
Use the following to take screenshot of current screen:
html2canvas(document.body).then(function(canvas) {
});
then use canvas.toDataURL(); to convert image to base64 and upload.
Edit: Thanks to #Dogoku, I was able to find a solution (here). It turns out that Chrome doesn't allow/handle the download attribute anymore, so we have to force a workaround.
I'm trying to create a javascript bookmarklet that downloads images (code shown below). It's accessing the url correctly, but instead of downloading the image it just opens the image in a new tab.
Please help!
r.addEventListener('click', function(ev) {
r.href = h;
r.download = c;
}, false);
document.body.appendChild(r), r.click(), document.body.removeChild(r);
the variable r is created using document.createElement("a") which creates an element like so:
Before, when using a bookmarklet you could basically just "click" on the image and it would download.
I have Jcrop on a video source, <img src ="http://ip_address/stream">
The html page displays the container with the video inside, but it is a still image. Once I click on the image, it updates. Once I click/drag to crop the video area, the area within the crop selection shows the video updating.
How do I get it so that the video stream is constantly updating before, and while, making a crop selection?
EDIT:
using the Inspect Element tools, on Network Monitor, the Status Code for the page that continuously updates the video regardless of having made a selection is: 200 OK
whereas the Status Code for the page with the video that does not update unless clicked is: 304 Not Modified
In order to force a refresh of the image every (say) 1 second you need to:
Use a javascript setInterval
Cachebust the image source if the filename isn't changing
for instance the following code
<img id="vidimg" src="Assets/img.jpg">
<script>
setInterval(function(){
document.getElementById("vidimg").src="Assets/img.jpg" +
"?cachebuster=" + Math.round(new Date().getTime() / 1000).toString() },
1000);
</script>
the setInterval(... ,1000); causes the function within to repeat every 1000 milliseconds (once a second) - you may want to adjust this depending on the download speed/refresh rate of the image source you are using. The function can be inline, as I have done here, or if there is more complex logic involved you can make it a named function and reference that instead.
the document.getElementById("vidimg").src="Assets/img.jpg" simply reloads the image source - on its own this may cause the browser to attempt to be smart if the image appears to be the same as what is already cached, so you need to add a random parameter to the filename in order to force it to re-fetch from the server, hence the + "?cachebuster=" + Math.round(new Date().getTime() / 1000).toString() which just adds a parameter based on the current time.
If your source doesn't have a filename (as in the example in your question) then adding the cachebuster should still work.
As I don't have access to a source like the one you describe I've not been able to test this, but in theory it should work. Alternatively can you not use a <video src ="http://ip_address/stream"> to access it?
I want to create a service in appcelerator android where it starts when i click a download button and stops only if download is interrupted/fails or network is not present.
How can i achieve it? I have referred this article
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Android.Service
I am following this http://docs.appcelerator.com/platform/latest/#!/guide/File_Uploads_and_Downloads for downloading content (videos)
The other problem i face is ,i can't access the UI or the UI becomes almost non responsive, though i can scroll up and down. when download is in progress on android. This is what the UI looks like and i call a function on click of download button.
NOTE: Each element,light gray rectangle is like an accordian control, which toggles(expands and retracts) on click.
I have written a code like this in a videoDownloader.js file
function downloadVideos(video_download_url){
var xhr = Titanium.Network.createHTTPClient({
onload: function() {
// first, grab a "handle" to the file where you'll store the downloaded data
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,'video.mp4');
f.write(this.responseData); // write to the file
timeout: 10000
});
xhr.open('GET',video_download_url);
xhr.send();
}
You might want to look into this module which handles everything for you.
i have a requirement. on click of a link, an attachment should open up in a new window (using window.open() ). The attachment is ideally a pdf file which resides on web server virtual directory(using IIS 7 for testing).
The input to the pdf attachment is generally a url, such as-
http://localhost/attachments/sample.pdf
The pdf open up fine but then the page should automatically show the print dialog to the user. The problem is -
1. the attachments are of different sizes.
2. Attachments loading time is variable depending upon its size.
I have tried the following-
1. 'onload' event for body/iframe.
2. jQuery load function to track the loading of the file.
3. $.get operation by enabling CORS on my requested content.
but none of them worked.
here's what i have tried-
var dom = window.open( '', '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
dom.document.writeln('<html><title>Attachment</title><head>');
dom.document.writeln('<script type=\'text/javascript\' language=\'javascript\' src=\'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js\'><\/script>');
dom.document.writeln('<script type=\'text/javascript\' language=\'javascript\'>' );
dom.document.writeln('$(document).ready(function() { /*load/get function goes here */});');
dom.document.writeln('<\/script>')
dom.document.writeln('</head><body><iframe width="100%" height="100%" id="container" type="application\/pdf" src="http://localhost/attachments/sample.pdf"></iframe></body></html>');
dom.document.close();
Is there any way possible to track the loading of the attachment because i am completely out of options now?
If you can modify the PDFs themselves, you can add a print function to the file itself which would work around the issue of tracking when the iframe is loaded.