0

So Basically I am capturing an image through camera with some html5 vidoe, canvas and button tags, But before I upload this image to server I need to save the image to the internet temporary directory and then access the image and upload the image to server, So far I could do is to capture the canvas image but don't know how to save it in the local pc internet temp directory, I found an already asked question which the answer was

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image;

the problem with above code is that it pops the download box to client and request the client where to save it, but I need to save the image without prompting anything to user and save it to internet temp direcotry.

here is the code where I take the canvas image

document.getElementById("snapButton").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
var myImg = document.getElementById("myImg");
myImg.src = canvas.toDataURL();
});

so I would really appreciate if somebody tell me what code do I add to above eventListener to save the image.

smalinux
  • 1,132
  • 2
  • 13
  • 28
darees
  • 17
  • 2
  • 8
  • 1
    _"the problem with above code is that it pops the download box to client and request the client where to save it, but I need to save the image without prompting anything to user to internet temp direcotry"_ Only user can set which folder dowloaded files should be saved to at browser preferences. Why do you not want to allow user to select directory where file will be saved at user filesystem? – guest271314 Sep 18 '16 at 17:58
  • no you got the question wrong I don't want to download the image I directly wanna save it to temp folder, – darees Sep 18 '16 at 18:08
  • _"no you got the question wrong I don't want to download the image I directly wanna save it to temp folder"_ What is the difference between "download" and "save"? What is purpose of "save" image to a "temp folder"? Do you mean "temp folder" at users' filesystem? – guest271314 Sep 18 '16 at 18:11

1 Answers1

1

If you just need a temporary place to hold a small piece of data (<5mb), you can use localStorage. Think of localStorage as a local temp storage area for your app's data. LocalStorage does not require user's permissions.

But for obvious security reasons, storing anything to the user's disk will require their permission so you cannot avoid the popup to the user.

markE
  • 102,905
  • 11
  • 164
  • 176
  • Why save to `localStorage` when `canvas.toDataURL()` can be stored as a variable? – guest271314 Sep 18 '16 at 18:13
  • @guest271314 The question asks about saving to the user's device. Yes, you could AJAX the dataURL directly to the server (I probably would do that). You would have to ask the questioner why they have this requirement. – markE Sep 18 '16 at 18:17
  • Yes, have posed this question to OP at comment. Not entirely clear what requirement actually is. OP uses terms "save" and "download" as if they are two separate processes _"no you got the question wrong I don't want to download the image I directly wanna save it to temp folder,"_. Your proposal would save file to users' filesystem, though you could reduce the overall size of the referenced file at `localStorage` by storing a `Blob URL` of image instead of `data URI` of image. – guest271314 Sep 18 '16 at 18:22
  • yeah bro, localstorage is what i wanted, if you can put some light in it, I'd appreciate it, although i'll google it, thanks – darees Sep 18 '16 at 19:41
  • @guest271314 ObjectURL is valid only for the session life. Don't try to save it anywhere. – Kaiido Sep 18 '16 at 23:18
  • @Kaiido Yes. Suggested `Blob URL` as OP mentioned a "temp folder". As opposed to saving image on user filesystem for a possibly unknown duration at `localStorage` – guest271314 Sep 18 '16 at 23:24
  • @guest271314 ObjectURL lifetime is implementation dependant, with a minimum of the document which created it life time. Some UA will destroy it from a simple refresh, just like any other variable. You should never have to save it to the localStorage. – Kaiido Sep 19 '16 at 00:21
  • @Kaiido Yes, you are correct. Was attempting to suggest solution where data is not possible stored [forever](http://stackoverflow.com/questions/2326943/when-do-items-in-html5-local-storage-expire#comment57439415_2327030) at user filesystem. Another alternative could be `TEMPORARY` storage at `LocalFileSystem` _"Transient storage is available to any web app. It is automatic and does not need to be requested, but the browser can delete the storage without warning."_ Though requirement is apparently to permanently store the `data URI` at users' filesystem. – guest271314 Sep 19 '16 at 00:45